突出显示的输入文本不会在按键时更新

Question

当用户在标签中突出显示其整个输入，然后在按下数字键以更新所选输入时，如果达到最大输入大小，则输入将不会更新（只有在用户突出显示整个输入值）。对于我的代码，下面的输入类型是一个数字，范围为0-999，最大输入大小为3。这可能是此问题的原因吗？

input.js：

table.rows[2].cells[1].innerHTML = "<input type=number id=input name=number min=0 max=999 value=>";

document.getElementById("input").addEventListener("input", processInput);

document.getElementById("input").onkeypress = function() {
   if (this.value.length == 3) {
      return false;
   } 
   if (event.charCode == 46 || event.charCode == 45) {
      event.preventDefault();
   }
};

Answer 1

使用时突出显示整个输入，长度仍为3。if (this.value.length == 3) {变为true，函数返回false。

解决此问题：

您可以使用selectionStart和selectionEnd来检查用户是否选择了文本。

document.getElementById("input").onkeypress = function() {
    var selectionLength = this.selectionEnd - this.selectionStart;
   if (this.value.length == 3 && selectionLength == 0) {
      return false;
   } 
   if (event.charCode == 46 || event.charCode == 45) {
      event.preventDefault();
   }
};

https://stackoverflow.com/a/41233895/6768965

https://jsfiddle.net/vbt6yosr/1/

Answer 2

似乎您的问题是if处理程序中的第一个onkeypress语句-如果您有3个字符，则不会进行任何处理。可悲的是，在数字输入上设置最大值并不能阻止用户键入更大的数字（至少在Firefox上不是这样），设置maxlength属性似乎也不能解决问题。但是，我整理了一些javascript，它提供了几乎自然的响应：

• 键入多余的字符：它们会短暂显示，但会被剪掉
• 减少到小于零：应钳位为零
• 后退间距应允许清空该字段。

这里：

<script type="text/javascript">
var input = document.querySelector("#input");
var min = parseInt(input.min);
var max = parseInt(input.max);

input.onkeypress = function(ev) {
  // I assume the OP has a good reason for ignoring
  // - and .
  if (ev.charCode == 46 || ev.charCode == 45) {
     ev.preventDefault();
     return;
  }
};
input.onkeyup = function(ev) {
  var current = parseInt(input.value);
  if (current == "") {
    return;
  }
  input.value = clamp(current);
}
function clamp(value) {
  if (isNaN(value)) {
    return "";
  }
  if (value >= min && value <= max) {
    return value;
  }
  if (value > max) {
    var str = value.toString();
    return str.substr(0, (max + "").length);
  }
  return min;
}
</script>

当然，仅应在输入的[[after下找到此脚本，因为它假定输入存在。您可能还需要修改它以适应多个输入的需求，因为我已经存储了像输入这样的变量，并且它在全局变量中是min / max。