Javascript - Wie Prozentzeichen am Ende hinzufügen [keine jquery]

Question

Ich muss ein '%' Symbol zu den Werten hinzufügen in ein Eingabefeld eingegeben. Wie kann ich dies nur mit Javascript tun (nicht mit jquery oder anderen libs).

Beispiel:

Wenn I "34" in das Eingabefeld sollte es als "34%" angezeigt. Im Folgenden mein Eingabefeld Probe:

<input type="text" id="amountId" onkeydown="change(event)" /> 

Answer 1

mit einem Textfeld, das ist relativ einfach:

var input = document.getElementById('amountId'); 
 

 
input.addEventListener('blur', function() { // as soon as the input element loses focus, "%" is appended 
 
    input.value += '%'; 
 
});

<input type="text" id="amountId" />

Allerdings gibt es ein paar Dinge zu beachten:

• Es ist nicht sehr benutzerfreundlich (wenn der Benutzer den Wert von 34 zu 35 ändern möchte, er oder sie muss das % Zeichen löschen).
• Wenn der Benutzer nicht numerische Werte (foobar) eingibt, wird auch % angefügt.

Aus diesen Gründen würde ich nur verwenden <input type="number">:

<input type="number" min="0" max="100">%

Answer 2

konnte ich mit einer Lösung, die durch umfangreiche Verwendung von event.preventDefault() kommen zu verhindern Nicht-Numberic Charakter vom Drucken und Neu-Rendern des Wertes in jeder Taste. Der Zahlenteil des Wertes wird zuerst geparst und ich füge den gedrückten Schlüsselwert und das% -Zeichen am Ende der Zeichenkette an. Leider kann ich die vollständige Lösung nicht teilen, da die Logik für meinen speziellen Anwendungsfall weiter angepasst wird.