将文本输入限制为仅数字

本文介绍了将文本输入限制为仅数字的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想通过以下实现来实现文本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="ajax.googleapis/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.

提琴: jsfiddle/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.

提琴: jsfiddle/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) } }