Eingabetyp = „Zahl“: Beschränken Sie sich auf 4 Dezimalstellen, erlauben Sie jedoch die Eingabe vor der Dezimalstelle ⇐ HTML

[Anonymous]

Ich habe ein Feld mit type="number". Ich möchte:

• Den Benutzer auf 4 Dezimalstellen beschränken.
• Dem Benutzer erlauben, vor der Dezimalstelle einzugeben (z. B. Ziffern links einzufügen).
• Verhindern, dass sich die Benutzeroberfläche ändert automatisch während der Eingabe (ich möchte nicht, dass 12.34567 erscheint und dann gerundet wird, wenn die Eingabe den Fokus verliert).

Derzeit sieht meine Implementierung so aus:

Code: Select all

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();
}
}
};

Mein Problem ist:

• Wenn der Benutzer 4 Dezimalstellen erreicht, blockiert die Eingabe jegliche Eingabe, auch wenn sich der Cursor vor der Dezimalstelle befindet.
• Ich kann den Eingabetyp aufgrund anderer Einschränkungen nicht auf Text umstellen.
• Ich möchte eine Möglichkeit haben, den neuen Wert oder die Cursorposition zu erkennen, um die Eingabe vor der Dezimalstelle zu ermöglichen, aber dennoch eine Überschreitung zu verhindern 4 Dezimalstellen.

Gibt es eine Möglichkeit, den alten Wert und den neuen Wert zu kennen, der sich aus dem Tastendruck ergeben würde, oder die Cursorposition in einem zu kennen, um natürlich eine Bearbeitung vor der Dezimalstelle zu ermöglichen, ohne dass die Eingabe vorübergehend mehr als 4 Dezimalstellen anzeigt?
Irgendwelche Vorschläge, wie man dieses Problem in
lösen kann

Code: Select all

type="number" 

Eingaben wären sehr hilfreich.