将文本输入限制为仅数字 [英] Limit text input to numbers only

问题描述

我想通过以下实现来实现文本input:

I want to implement a text input with the following implementations:

• 只允许输入数字
• 限制从0到255之间的数字
• 如果输入的是非法"字符(非数字，或大于或小于255)，则应禁用input，稍等片刻，然后删除无效的字符，然后重新获得焦点.

• Only allow numbers
• Limit numbers from 0 - 255
• If an 'illegal' character was entered (non numbers, or over or under 255), the input should get disabled, wait a second, then delete the invalid char, and get back to focus.

由于此答案，我实现了所有实现.不过有一个问题.如果输入35(即合法")，则将光标移至3和5之间，然后输入1，其结果为315.由于大于255，因此它变为非法".因此删除了5.我不想删除5个，我希望删除1个，因为那是最后输入的一个.

I got all that implemented thanks to this answer. There's an issue though. If you enter 35 (that's 'legal'), then move the cursor between 3 and 5, then enter 1, which comes out to 315. That becomes 'illegal' because it's more than 255. So the 5 gets deleted. I don't want the 5 to get removed, I want the 1 to get deleted because that was the last one entered.

但是，如果输入31，则应该删除5、5.基本上，我希望最后输入输入的号码在插入非法金额时被删除.

But if you enter 31, then 5, 5 should get removed. Basically, I want the last number entered to get deleted when an illegal amount gets inserted.

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

Also, I want the cursor to go to the position of the last removed character, whether it's a number or letter.

代码如下:

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

推荐答案

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

You can use selectionStart and selectionEnd to see where the cursor is in the input and then use those values to remove the correct character.

提琴: 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设置光标位置.

You can set the cursor position using 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)
  }

}

这篇关于将文本输入限制为仅数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！