HTML入力の先頭文字は変更できませんか？

Question

デフォルトの開始値が変更できないinput要素を生成するにはどうすればよいですか？たとえば、ユーザーから番号を探していますが、すべての入力がその番号で始まるため、入力テキストボックスに '333'を入力します。私はまた、ユーザーがそれを変更できるようにしたくありません。私は333を値の一部にする必要があります。これは、バリデーションを行う必要があるので、スタイルを介して追加するだけではありません。

Answer 1

1つの入力と同じように見える2つの入力を使用することをお勧めします（最初の入力は読み取り専用です）。このフィドルを参照してください：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; 
} 

ユーザー入力を読むとき、あなたが自然に静的な部分、前に付加する必要があります：ウィリアムBが示唆したように、私は2つの入力を使用したい

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

Answer 2

を私は検討したいですdisabled属性またはreadonly属性のどちらを使用するかを指定します。 disabled属性は、最初の入力をフォーカスすることができず、デフォルトのブラウザスタイルでは灰色の背景が表示されます。 readonly属性を使用すると、それに焦点を当てることができ、より望ましい初期のスタイリングを持つことができます。 JavaScriptを使用して

Answer 3

ワンpossibilty：

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" />