Question

我想通过以下实现实现文本input：

仅允许数字
限制数字0 - 255
如果是非法的＆＃39;输入了字符（非数字，或大于或小于255），input应该被禁用，等待一秒，然后删除无效的字符，然后重新聚焦。

由于this answer，我完成了所有这些工作。但是存在一个问题。如果您输入35（＆＃39; legal＆＃39;），则将光标移动到3和5之间，然后输入1，这将显示为315.这将变为非法＆＃39;因为它超过255.所以5被删除了。我不希望5被删除，我希望1被删除，因为这是最后输入的。

但是如果输入31，那么应该删除5,5。基本上，我希望在插入非法金额时删除最后一个输入号码。

此外，我希望光标转到最后删除的字符的位置，无论它是数字还是字母。

以下是代码：

JSFiddle

＆＃13;

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();
});

＆＃13;

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

＆＃13;

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);

})

将文本输入限制为仅限数字

JSFiddle

2 个答案: