只有和经销商的掩蔽JavaScript或jQuery的输入文本号 [英] javascript or jquery Input text number only and auto masking
问题描述
我使用JavaScript和jQuery。
I use javascript and jquery.
我想打一个遮蔽模板
＆LT;输入类型=文本＆GT;
其中接受数字只有和自动屏蔽，每数KEYUP 结果格式。
在屏蔽格式为：99-99-99-99- [重复格式，直到最后inputed号]
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]
有关有效的输入和结果的例子：
Examples for valid input and result :
Inputed：001234567890
结果：00-12-34-56-78-90-
Inputed：00 [退格] 1234567890
结果：01-23-45-67-89-0
Inputed：00 [退格] 1234567890
结果：01-23-45-67-89-0
我现在的完整的HTML工作有问题的脚本：
Inputed : 001234567890
Result : 00-12-34-56-78-90-
Inputed : 00[backspace]1234567890
Result : 01-23-45-67-89-0
Inputed : 00[backspace]1234567890
Result : 01-23-45-67-89-0
My current complete html working script with problems :
<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>
的问题是如何保持它的屏蔽格式99-99-99-99- [重复格式，直到最后inputed号]？ ：
1.如果用户是pressing删除或退格，则将会改变。如何保持掩蔽格式静止不动？
例如：
输入：preSS 1234567890，移动箭头左4，preSS删除，preSS 8，并移动到最后一行和preSS 12
我的错误的结果：12-38-56-78-90-1-2
正确的结果：12-38-56-78-90-12-
2.如果PSS数用户$ P $的速度非常快，输入掩码将变得怪异......有时它可以成为999-9-99-99-99-和其他掩蔽格式。没有给我想要的屏蔽格式。它应该还是与遮蔽格式：99-99-99-99- [重复格式，直到最后inputed号]。如何解决我目前的脚本？
例如：
输入：preS 123快速
我的错误的结果：123-
正确的结果：12-3
任何想法如何解决我的脚本？
PS：
我已经阅读下面的链接，还是给了我不知道来解决我的脚本：
<一href="http://stackoverflow.com/questions/995183/how-to-allow-only-numeric-0-9-in-html-inputbox-using-jquery">How只允许数字（0-9）的HTML输入框使用jQuery？
只接受数字的文本框 - jQuery的
jQuery插件来格式化文本输入
<一href="http://stackoverflow.com/questions/7488555/how-to-allow-only-numbers-on-a-text-input-but-allow-commands-with-javascript">How允许在文本输入唯一的数字，但允许使用JavaScript命令？
<一href="http://stackoverflow.com/questions/3257485/only-allow-numbers-in-an-input-with-javascript-and-allow-copy-and-paste">Only允许在输入数字与javascript和允许复制和粘贴？
限制输入号码只粘贴
jQuery的只有在输入数字
掩码输入号码 - ％的
在AutoTab投入使用javascript
<一href="http://stackoverflow.com/questions/12533508/only-allow-numbers-in-input-tage-without-javascript">Only让数字输入踏歌没有JavaScript
<一href="http://stackoverflow.com/questions/17999067/how-to-force-only-numbers-in-a-input-without-javascript">How给力只有数字的输入，而不使用Javascript？
帮助改善这个JavaScript输入掩码
为什么我的jQuery的输入掩码不工作？
Problems are how to keep it on the masking format 99-99-99-99-[repeat format until last inputed number] ? :
1. If the user is pressing delete, or backspace, the will be changed. 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
My wrong result : 12-38-56-78-90-1-2
Correct result : 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. 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]. How to fix my current script ?
Eg:
Input : pres 123 in quick
My wrong result : 123-
Correct result : 12-3
Any idea how to fix my script ?
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?
Accept only numbers in Textbox - jQuery
jquery plugin to format text input
How to allow only numbers on a text input but allow commands with JavaScript?
Only allow numbers in an input with javascript and allow copy and paste?
Restrict input to number only on pasting
jQuery only digits in input
Mask input for number - percent
Autotab input with javascript
Only allow Numbers in input Tage without Javascript
How to force only numbers in a input, without Javascript?
Help to improve this javascript input mask
Why is my jquery input mask not working?
推荐答案
由我自己完成它。下面就是答案：
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>
使用 .match（/ {1,2} / G）和加入（）它。最后， .replace（/，/克， - ））已输入的字符串。
Use the .match(/.{1,2}/g) then join() it. finally, .replace(/,/g , "-")) the inputed string.
这篇关于只有和经销商的掩蔽JavaScript或jQuery的输入文本号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
