javascript或jquery仅输入文本编号和自动屏蔽
[英]javascript or jquery Input text number only and auto masking
问题描述
I use javascript and jquery. 
我使用javascript和jquery。
I want to make a masking template for 我想制作一个遮罩模板
<input type="text">
Which accept numbers only and auto masking format for every number keyup result. 每种数字 键入结果仅接受数字和自动屏蔽格式 。
The masking format is : 99-99-99-99-[repeat format until last inputed number] 屏蔽格式为：99-99-99-99- [重复格式，直到最后输入的数字]
Examples for valid input and result : 有效输入和结果的示例：
Inputed : 001234567890 输入：001234567890
Result : 00-12-34-56-78-90- 结果：00-12-34-56-78-90-
Inputed : 00[backspace]1234567890 输入的是：00 [backspace] 1234567890
Result : 01-23-45-67-89-0 结果：01-23-45-67-89-0
Inputed : 00[backspace]1234567890 输入的是：00 [backspace] 1234567890
Result : 01-23-45-67-89-0 结果：01-23-45-67-89-0
My current complete html working script with problems : 我当前存在问题的完整html工作脚本：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
</head>
<body>
<script>
var count1=0;
var strPrev1 = '';
$(document).ready(function()
{
$('#input1').keyup(function(e)
{
// Filter input text to accept only numbers , arrow movement, backspace, delete
if ((e.keyCode == 8) || (e.keyCode == 46) || (e.keyCode >= 35 && e.keyCode <= 40) || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105))
{
if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105))
{
count1++;
// if count1 % 2 = 0, add divider '-'
if (count1 % 2 == 0)
{
$("#input1").val($("#input1").val()+'-');
}
}
if ((e.keyCode == 8) || (e.keyCode == 46))
{
// no idea what to do to keep the mask format 99-99-99-99-[repeat format until last inputed number] is it "count1--;" ?
}
strPrev1 = $("#input1").val();
}
else
{
// replace input text value with previous accepted
$("#input1").val(strPrev1);
}
});
});
</script>
<input name="input1" id="input1" type="text">
</body>
</html>
Problems are how to keep it on the masking format 99-99-99-99-[repeat format until last inputed number] ? 问题是如何将其保留为掩码格式99-99-99-99- [重复格式，直到最后输入的数字]？ : ：
1. If the user is pressing delete, or backspace, the will be changed. 1.如果用户按Delete键或Backspace键，将对其进行更改。 How to keep the masking format stand still ? 如何保持屏蔽格式静止不动？
eg : 例如：
Input : press 1234567890, move arrow left to 4, press delete, press 8, and move to the last line and press 12 输入：按1234567890，将箭头向左移至4，按Delete，按8，然后移至最后一行，然后按12
My wrong result : 12-38-56-78-90-1-2 我的错误结果：12-38-56-78-90-1-2
Correct result : 12-38-56-78-90-12- 正确的结果：12-38-56-78-90-12-
2. If the user press the number in very fast, the input mask will be come weird... Sometimes it can become 999-9-99-99-99- and other masking format. 2.如果用户快速按下数字，输入掩码将变得很奇怪。有时它可能会变成999-9-99-99-99-和其他掩码格式。 Did not give me the desired masking format.. It should be still with the masking format : 99-99-99-99-[repeat format until last inputed number]. 没有给我想要的屏蔽格式。.应该仍然使用屏蔽格式：99-99-99-99- [重复格式，直到最后输入的数字]。 How to fix my current script ? 如何修复当前的脚本？
Eg: 例如：
Input : pres 123 in quick 输入：快速输入123
My wrong result : 123- 我的错误结果：123-
Correct result : 12-3 正确的结果：12-3
Any idea how to fix my script ? 知道如何解决我的脚本吗？
PS : PS：
I already read the following links, still give me no idea to fix my script : 我已经阅读了以下链接，但仍然不知道要修复我的脚本：
How to allow only numeric (0-9) in HTML inputbox using jQuery? 如何使用jQuery在HTML输入框中仅允许数字（0-9）？
Accept only numbers in Textbox - jQuery 在文本框中仅接受数字-jQuery
jquery plugin to format text input jQuery插件格式化文本输入
How to allow only numbers on a text input but allow commands with JavaScript? 如何在文本输入中仅允许数字但允许使用JavaScript命令？
Only allow numbers in an input with javascript and allow copy and paste? 仅允许在使用javascript的输入中输入数字并允许复制和粘贴？
Restrict input to number only on pasting 仅在粘贴时将输入限制为数字
jQuery only digits in input jQuery输入中只有数字
Mask input for number - percent 掩码输入数字-百分比
Autotab input with javascript 用JavaScript自动输入标签
Only allow Numbers in input Tage without Javascript 仅允许输入Tage中的数字而不使用Javascript
How to force only numbers in a input, without Javascript? 如何在不使用Javascript的情况下仅强制数字输入？
Help to improve this javascript input mask 帮助改善此javascript输入掩码
Why is my jquery input mask not working? 为什么我的jquery输入掩码不起作用？
2 个解决方案
解决方案1
0 2014-04-29 18:16:50
If the user holds down a key the keyup event won't trigger, use a keypress event handler. 如果用户按住某个键，则不会触发keyup事件，请使用keypress事件处理程序。 Here's what I changed: 这是我更改的内容：
$('#input1').keypress(function(e)
... ...
if (count1 > 0 && count1 % 2 == 0)
{
$("#input1").val($("#input1").val()+'-');
}
count1++;
解决方案2
0 已采纳 2014-05-03 19:30:36
Done it by my self. 我自己做的。 Here is the answer : 这是答案：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
</head>
<body>
<script>
var strPrev1 = '';
var strScore1 = '';
$(document).ready(function()
{
$('#input1a').keyup(function(e)
{
if ( $("#input1a").val() == '' ) { $("#input0a").val(''); }
// Filter input text to accept only numbers , arrow movement, backspace, delete
if ((e.keyCode == 8) || (e.keyCode == 46) || (e.keyCode == 16) || (e.keyCode >= 35 && e.keyCode <= 40) || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105))
{
if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105) || (e.keyCode == 8) || (e.keyCode == 46))
{
$("#input1a").val().replace("-","");
strScore1 = $("#input1a").val().match(/.{1,2}/g);
$("#input0a").val(strScore1.join().replace(/,/g , "-"));
}
strPrev1 = $("#input1a").val();
}
else
{
// replace input text value with previous accepted
$("#input1a").val(strPrev1);
}
});
});
</script>
RESULT : <input name="input0a" id="input0a" type="text" style="width: 100%;" disabled>
SOURCE : <input name="input1a" id="input1a" type="text">
</body>
</html>
Use the .match(/.{1,2}/g) then join() it. 使用.match（/。{1,2} / g）然后加入（） 。 finally, .replace(/,/g , "-")) the inputed string. 最后， .replace（/，/ g，“-”））输入的字符串。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.