unveränderbare führende Zeichen in HTML-Eingabe?

Question

Wie erzeuge ich ein Eingabeelement, das einen unveränderlichen Startwert enthält? Zum Beispiel suche ich nach einer Nummer vom Benutzer, aber ich möchte, dass '333' bereits in der Eingabetextbox ist, da alle Eingaben mit dieser Nummer beginnen. Ich möchte auch nicht, dass der Benutzer es ändern kann. Ich brauche die 333, um Teil des Wertes zu sein, anstatt nur über Stil hinzugefügt zu werden, da ich eine Validierung durchführen muss.

Answer 1

Ich würde vorschlagen, 2 Eingänge, die wie ein einziger Eingang aussehen, mit dem ersten Readonly. Sehen Sie diese Geige: https://jsfiddle.net/39whrqup/2/

<input readonly value="333" class="static-input"> 
<input class="nonstatic-input"> 

.static-input { 
    margin-right: -20px; 
    width: 50px; 
    border: 0; 
} 

.nonstatic-input { 
    border: 0; 
} 

Wenn die Benutzereingabe zu lesen müssen Sie den statischen Teil Zierer natürlich:

var userInput = document.querySelector('input.static-input').value + 
       document.querySelector('input.nonstatic-input').value; 

Answer 2

I 2 Eingänge verwenden würde, als William B vorgeschlagen, aber ich würde betrachten ob das Attribut disabled oder das Attribut readonly verwendet werden soll. Das Attribut disabled lässt nicht zu, dass die erste Eingabe fokussiert wird und der Standard-Browser-Stil erhält einen grauen Hintergrund. Das Attribut readonly ermöglicht es, dass es fokussiert wird und möglicherweise ein wünschenswertes anfängliches Styling hat.

Answer 3

Eine Möglichkeit, mit Hilfe von JavaScript:

nine = document.getElementById("nine"); 
 
nine.addEventListener("keydown", function (ev) { 
 
    var el = this; 
 
    var value = el.value; 
 
    setTimeout(function() { 
 
    if (el.value.indexOf("333") != 0) { 
 
     el.value = value; 
 
    } 
 
    }, 0); 
 
});

<input type="text" value="333" id="nine" />