Alleiterativ auf das maxlength-Attribut

Question

Auf der Seite, an der ich arbeite, haben wir eine interaktive Tastatur für Touchscreens. Es sieht großartig aus und funktioniert fantastisch, außer wenn wir eine maximale Zeichenanzahl für ein Feld haben wollen.

Die maxlength-Eigenschaft funktioniert nicht, weil die Tastatur den Fokus von der Eingabe nimmt und in die Eingaben einfügt.

Gibt es eine andere Möglichkeit, um zu begrenzen, was Personen in Eingabefelder eingeben können, ohne die maxlength-Eigenschaft zu verwenden?

Ich habe im Web nach Lösungen gesucht und aus allem, was ich gefunden habe, weisen alle immer nur auf die Verwendung von maxlength hin.

Ich habe ein paar Dinge ausprobiert, wie z.B. das Erstellen eines Substrings

$('.input').val().substring(9);

aber der Benutzer kann immer noch ins Feld eingeben, es wird nur angehalten, wenn der Wert abgerufen wird.

Ich habe auch

return false;

innerhalb einer if-Anweisung ausprobiert, wenn sie die maximale Zeichenanzahl erreichen, aber das friert meine Seite einfach ein und der Benutzer kann nicht mehr mit dem Bildschirm interagieren.

Gibt es eine andere Möglichkeit, dies zu erreichen?

Answer 1

Nach jedem Zeichen etwas wie dieses tun:

$('.input').val( $(this).val().substring(0,100) );

Demo

Answer 2

Alles was du brauchst, ist eine Funktion, um die Eingabe nach der angegebenen Anzahl von Zeichen zu kürzen:

function truncateInput(inputElement, maxLength) {
    inputElement = $(inputElement);
    inputElement.on("change",function() {
        var val = inputElement.val();
        val = val.substr(0,maxLength - 1);
        inputElement.val(val);
    });
}

Übergebe den jQuery Selector String (z.B. '#element' nicht $('#element')) und die maximale Länge, und es wird die erforderlichen Listener hinzufügen, um dies für dich zu erledigen.