Question

我使用javascript和jquery。

我想为

制作一个屏蔽模板

<input type="text">

仅接受数字和每个数字键盘的自动屏蔽格式结果。

屏蔽格式为：99-99-99-99- [重复格式直到最后输入的数字]

有效输入和结果的示例：

输入：001234567890
结果：00-12-34-56-78-90-

输入：00 [退格] 1234567890
结果：01-23-45-67-89-0

输入：00 [退格] 1234567890
结果：01-23-45-67-89-0

我目前完整的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>

问题是如何将其保持在屏蔽格式99-99-99-99- [重复格式直到最后输入的数字]？：
1.如果用户按下删除或退格键，则将更改。如何保持屏蔽格式不变？例如：
输入：按1234567890，向左箭头移动到4，按删除，按8，然后移到最后一行，按12 我的错误结果：12-38-56-78-90-1-2
正确的结果：12-38-56-78-90-12-

2.如果用户以非常快的速度按下数字，输入掩码会变得怪异......有时它可能变成999-9-99-99-99-等掩蔽格式。没有给我所需的屏蔽格式..它应该仍然采用屏蔽格式：99-99-99-99- [重复格式直到最后输入的数字]。如何修复我当前的脚本？

例如：
输入：快速输入123 我错了结果：123-
正确的结果：12-3

知道如何修复我的脚本吗？
PS：
我已经阅读了以下链接，仍然无法修复我的脚本：
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?

Answer 1

如果用户按下键，键盘事件不会触发，请使用按键事件处理程序。这是我改变的内容：

$('#input1').keypress(function(e)

...

if (count1 > 0 && count1 % 2 == 0) 
{ 
  $("#input1").val($("#input1").val()+'-');
}
count1++;

DEMO

Answer 2

由我自己完成。这是答案：

<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（/，/ g，＆＃34; - ＆＃34;））输入的字符串。

javascript或jquery仅输入文本编号和自动屏蔽

2 个答案: