将文本输入仅限于数字

Question

我想用以下实现来实现文本input：

• 只允许数字
• 限制数字从 0 到 255
• 如果输入了“非法”字符（非数字，或大于或小于 255），input 应被禁用，稍等片刻，然后删除无效字符，然后返回焦点。

感谢this answer，我实现了所有这些。不过有一个问题。如果输入 35（即“合法”），然后在 3 和 5 之间移动光标，然后输入 1，即为 315。这变为“非法”，因为它超过 255。所以 5 被删除。我不想删除 5，我希望删除 1，因为那是最后输入的。

但是如果你输入 31，那么 5, 5 应该被删除。基本上，我希望在插入非法数量时删除最后一个输入数字。

另外，我希望光标移动到最后一个删除字符的位置，无论是数字还是字母。

代码如下：

JSFiddle

function disableInput(el) {
  var checks = [/\D/g.test(el.value), el.value > 255];
  if (checks.some(Boolean)) {
    $(el).prop("disabled", true)
      .queue("disabled", function() {
        $(this).prop("disabled", false)
      });
    setTimeout(function() {
      if (checks[0]) {
        el.value = el.value.replace(/\D/g, '');
      }
      if (checks[1]) {
        el.value = el.value.slice(0, 2);
      };
      $(el).dequeue("disabled").val(el.value).focus()
    }, 1000)
  }

}


$('input[name="number"]').keyup(function(e) {
  disableInput(this)
  $(this).focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input name="number" />

Answer 1

您可以使用 selectionStart 和 selectionEnd 查看光标在输入中的位置，然后使用这些值删除正确的字符。

小提琴：http://jsfiddle.net/o4bz0wr7/3/

function disableInput(el) {
  var checks = [/\D/g.test(el.value), el.value > 255];
  if (checks.some(Boolean)) {
    $(el).prop("disabled", true)
      .queue("disabled", function() {
        $(this).prop("disabled", false)
      });
    setTimeout(function() {
      if (checks[0] || checks[1]) {
        el.value = el.value.slice(0, el.selectionStart - 1) + el.value.slice(el.selectionEnd);
      }
      $(el).dequeue("disabled").val(el.value).focus()
    }, 1000)
  }

}


$('input[name="number"]').keyup(function(e) {
  disableInput(this)
  $(this).focus();
});

编辑：您可以使用setSelectionRange 设置光标位置。

小提琴：http://jsfiddle.net/o4bz0wr7/7/

function disableInput(el) {
  var checks = [/\D/g.test(el.value), el.value > 255];
  if (checks.some(Boolean)) {
    $(el).prop("disabled", true)
      .queue("disabled", function() {
        $(this).prop("disabled", false)
      });
    setTimeout(function() {
      var start = el.selectionStart - 1;
      if (checks[0] || checks[1]) {
        el.value = el.value.slice(0, start) + el.value.slice(el.selectionEnd);
      }
      $(el).dequeue("disabled").val(el.value).focus();
      el.setSelectionRange(start, start);
    }, 1000)
  }

}

Answer 2

这对你应该没问题，但是如果仍然有任何问题，请在评论中添加它。

在行动中查看here

var which = null;

function disableInput(el, $which) {
  console.log(el.value);
  var checks = [/\D/g.test(el.value), el.value > 255];
  if (checks.some(Boolean)) {
    $(el).prop("disabled", true)
      .queue("disabled", function() {
        $(this).prop("disabled", false)
      });
    setTimeout(function() {
     console.log(String.fromCharCode($which));
       el.value = el.value.replace($which, '');
       // el.value = el.value.slice(0,el.value.length - 1);


      $(el).dequeue("disabled").val(el.value).focus()
    }, 1000)
  }

}


$('input[name="number"]').keypress(function(e) {
    which = String.fromCharCode(e.which);
    $(this).focus();
}).keyup(function(){
    disableInput(this, which);

})