javascript - HTML输入中不可更改的前导字符？

Question

如何生成其中具有不可更改的默认起始值​​的输入元素？例如，我正在从用户那里寻找一个数字，但我希望“333”已经在输入文本框中，因为所有输入都以该数字开头。我也不希望用户能够更改它。我需要 333 也成为价值的一部分，而不是仅仅通过样式添加，因为我需要对其进行验证。

Answer 1

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

Answer 2

我会按照 William B 的建议使用 2 个输入，但我会考虑是使用disabled属性还是readonly属性。该disabled属性不允许聚焦第一个输入，默认浏览器样式将给它一个灰色背景。该readonly属性将允许它集中并可能具有更理想的初始样式。

Answer 3

我建议使用 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;
}

在阅读用户输入时，您必须自然地预先添加静态部分：

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