Question

我有一些js函数，不允许使用一些特殊字符，字符等... 某些使用粘贴功能并粘贴所有字符和特殊字符的用户被允许。

$(document).ready(function () {
          //called when key is down
          $("#recipient").bind("keydown", function (event) {
            if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || event.keyCode == 188 ||
                // Allow: Ctrl+A
        (event.keyCode == 65 && event.ctrlKey === true) ||

        // Allow: Ctrl+C
        (event.keyCode == 67 && event.ctrlKey === true) ||

        // Allow: Ctrl+V
        (event.keyCode == 86 && event.ctrlKey === true) ||



        // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
              // let it happen, don't do anything
              return;
        } else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault();
            }
        }
           });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" type="text" id="recipient" name="recipient" required="required" minlength="9">

此文本区域用于电话号码，它必须类似于：123123123。如果有人粘贴数字“ 123-123-123”或“ 123 123 123”，如何更改代码以不粘贴电话号码“-”或空格？

Answer 1

更新：您可以使用.replace()将非数字过滤为空字符串，并使用input而非keydown来获取当前输入的正确值

 $(document).ready(function () {
      //called when key is down
      $("#recipient").bind("input", function (event) {
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || event.keyCode == 188 ||
            // Allow: Ctrl+A
    (event.keyCode == 65 && event.ctrlKey === true) ||

    // Allow: Ctrl+C
    (event.keyCode == 67 && event.ctrlKey === true) ||

    // Allow: Ctrl+V
    (event.keyCode == 86 && event.ctrlKey === true) ||



    // Allow: home, end, left, right
        (event.keyCode >= 35 && event.keyCode <= 39)) {
          // let it happen, don't do anything
          return;
    } else {
        // Ensure that it is a number and stop the keypress
        if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault();
            
        }
        console.log(event.target.value)
        var numeric = event.target.value.replace(/[^0-9,]/g, '')//replace non-numeric into empty string
        console.log('numeric', numeric)   
        $('#recipient').val(numeric)
    }
       });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" type="text" id="recipient" name="recipient" required="required" minlength="9">

Answer 2

也许最简单明了的方法是使用正则表达式替换无效字符：

$(document).ready(function () {
  $("#recipient").bind("input", function (event) {
    $('#recipient').val($('#recipient').val().replace(/\D/g,""))
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" type="text" id="recipient" name="recipient" required="required" minlength="9">

Answer 3

JavaScript具有更简单的解决方案。

要在用户键入时实时格式化电话号码，您只需从输入框中获取值，然后使用

input.oninput = function() {}

OR

要格式化存储在剪贴板中的电话号码，您可以使用

从剪贴板中获取值

input.onpaste = function(event){}

如果愿意，可以通过删除tempText和formattedText变量来使我使用的函数变小，我仅出于代码易读性和方便用户在代码中其他位置使用变量的目的而使用它们。

/* Function 1 */
input.oninput = function() {
  var regExpr = /[^0-9,^,]/g; //If you don't want ',' comma then remove ^, from the code between [ ]
  var tempText = input.value;
  var formattedText = tempText.replace(regExpr, "");
  result.innerHTML = formattedText;
};

/* Function 2 */
input.onpaste = function(event) {
  var regExpr = /[^0-9,^,]/g; //If you don't want ',' comma then remove ^, from the code between [ ]
  var tempText = event.clipboardData.getData('text/plain');
  var formattedText = tempText.replace(regExpr, "");
  result.innerHTML = formattedText;
};

/*Has nothing to do with the paste formatting*/

body {
  display: flex;
  flex-direction: column;
  height: 80vh;
  justify-content: center;
  align-items: center;
  background: #222;
  color: #eee;
  text-align: center;
  font-family: monospace;
  font-size: 1.2em;
}

#input {
  text-align: center
}

<body>
  <div class="centerAll">
    <form>
      <label><b>Enter Phone Number</b></label><br/>
      <input type="phone" id="input" placeholder="Enter Phone Number...">
      <br/>
      <br/> Copy paste this:<br/>123-123-123,123<br/>
      <br/> Entered Phone number is:<br/>
      <span id="result"></span>
    </form>

  </div>
</body>

我希望这对您有帮助...

和平

粘贴在textarea中，不带特殊字符

3 个答案: