我想通过以下实现来实现文本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) } }更多推荐
将文本输入限制为仅数字
发布评论