Тип ввода = «число»: ограничить до 4 десятичных знаков, но разрешить ввод до десятичной точки. ⇐ Html

[Anonymous]

У меня есть поле с type="number". Я хочу:

• Ограничить пользователя четырьмя десятичными цифрами.
• Разрешить пользователю вводить данные до десятичной дроби (например, вставлять цифры слева).
• Запретить Пользовательский интерфейс не менялся автоматически при наборе текста (я не хочу, чтобы 12,34567 появлялось, а затем округлялось, когда ввод теряет фокус).

В настоящее время моя реализация выглядит следующим образом:

Код: Выделить всё

const handleKeyDown = (event) => {
const keyCode = event.charCode || event.keyCode;
const key = String(event.key);
let currentValue = event.target?.value ? String(event.target.value) : '';

if (keyCode === KEY_ESC) {
inputValue.value = '';
emits('update:modelValue', '');
return;
}

if (props.inputType === 'number' && props.isPositiveDouble) {

if (ALLOWED_KEYS.includes(key) || event.ctrlKey || event.metaKey) {
return;
}

if (key === '.' || key === ',') {
if (currentValue.includes('.') || props.decimals === 0) {
event.preventDefault();
}
return;
}

if (!isDigit(key)) {
event.preventDefault();
return;
}

preventExceedingDecimalLimit(currentValue, event);
}
};

const preventExceedingDecimalLimit = (value, event) => {
const decimalIndex = value.indexOf('.');
if (decimalIndex >= 0) {
const decimalsCount = value.length - decimalIndex - 1;
if (decimalsCount >= props.decimals) {
event.preventDefault();
}
}
};

Моя проблема:

• Если пользователь достигает 4 десятичных знаков, ввод блокируется, даже если курсор находится перед десятичной запятой.
• Я не могу переключить тип ввода на текст из-за других ограничений.
• Мне нужен способ определения нового значения или положения курсора, чтобы разрешить ввод до десятичной дроби, но при этом предотвратить превышение 4 десятичных знака.

есть ли способ узнать старое значение и новое значение, которое будет получено в результате нажатия клавиши, или узнать положение курсора в, чтобы разрешить редактирование до десятичного знака, конечно, не позволяя вводу временно отображать более 4 десятичных знаков?
Любые предложения о том, как решить эту проблему в

Код: Выделить всё

type="number" 

Вклад будет очень полезен.

Подробнее здесь: https://stackoverflow.com/questions/798 ... re-decimal