Question

我有一个工作脚本来替换文本输入中的非字母数字字母。如果你向文本输入添加特殊字符，它不会让你添加到那里。但是，我希望此脚本在添加字母后删除特殊字符，意味着您可以在那里看到该字母，但之后它已被删除（例如当您尝试在stackoverflow上提升您自己的问题时）

$("#nick").on("keypress", function(event) {


    var englishAlphabetAndWhiteSpace = /[A-Za-z]/g;

    var key = String.fromCharCode(event.which);

    if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39 || englishAlphabetAndWhiteSpace.test(key)) {
        return true;
    }

    return false;
});

这样做的正确方法是什么？

Answer 1

您可以使用正则表达式替换输入值中的所有非字母字符。

使用pattern上的HTML5 input属性来提供正则表达式
使用keyup和input事件处理程序捕获事件
使用否定类正则表达式删除所有非字母符号
延迟后使用setTimeout清除特殊字符

＆＃13;

var timeout;
$("#nick").on("keypress input", function(e) {
  var keyCode = e.keyCode || e.which; // Browser-independant

  // If left or right arrow, then don't do anything
  if (keyCode === 8 || keyCode === 37 || keyCode === 39) {
    return true;
  }

  var $this = $(this); // Cache this
  clearTimeout(timeout); // Clear previous timeouts

  timeout = setTimeout(function() {
    $this.val($this.val().replace(/[^A-Za-z]/g, ''));
  }, 500);
});

＆＃13;

input:valid {
  color: green;
}
input:invalid {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="nick" pattern="[A-Za-z]+" />

＆＃13;

正则表达式说明：

pattern上的正则表达式[A-Za-z]+仅匹配一个或多个大写和小写字母字符。

Answer 2

如果我读得正确，你说的是在无效字符消失之前插入一个延迟？

这有点棘手，因为有一个条款是你想要在它消失之前看多长时间。如果你比之前输入下一个字母更快，那该怎么办呢。

在处理完这些之后，看起来应该是这样的：

var removelast = false, remover;

var nick = $("#nick").on("keypress", function(event) {

    function remove() {
        nick.val(nick.val().slice(0,-1));
        removelast = false;
    }
  
    clearTimeout(remover);
    if(removelast) remove();
   
    var englishAlphabetAndWhiteSpace = /[A-Za-z]/g;

    var key = String.fromCharCode(event.which);
    var allowed = event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39 || englishAlphabetAndWhiteSpace.test(key);
    if (!allowed) {
        removelast = true;
        remover = setTimeout(remove, 100);
    }

    return true;
});

<input type="text" id="nick" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

您想要显示该字母然后将其删除，请使用＆＃39; keyup＆＃39;事件

$('#test').on('keyup keypress', function(e) {
    var reg = /[A-Za-z]/;
    var value = $(this).val();
    if (value && !reg.test(value[value.length - 1])) {
        $(this).val(value.slice(0, value.length - 1));
    }
})

Code on jsfiddler

添加后如何更换字母？

3 个答案: