Question

我需要我的正则表达式接受箭头键，字母和数字。我收到了字母和数字，但我卡在了箭头键上。到目前为止我有这个。

＆＃13;

var patt = /[^a-zA-Z0-9]+/g;
var helper;
$('#name').keyup(function(e){
    helper = $('#name').val();
    helper = helper.replace(patt,' ');
    $('#name').val(helper);
});

＆＃13;

感谢您的帮助。

Answer 1

问题是，当keyup事件被触发时，您正在替换元素的整个值。这样，光标将始终重置为结束。

要解决此问题，您可以通过访问元素的selectionStart property来捕获光标的初始位置。然后在替换值之后，您可以简单地将其设置回原来的位置：

以下是普通JS中的一个示例：

document.getElementById('name').addEventListener('input', function() {
  var position = this.selectionStart;
  
  this.value = this.value.replace(/[^a-zA-Z0-9]+/g, '');
  this.selectionEnd = position;
});

<input id="name" type="text" />

同样，jQuery版本也是一样的。我还将keyup事件更改为input事件，以便仅在实际更改值时触发事件。

$('#name').on('input', function(e) {
  var position = this.selectionStart;

  this.value = this.value.replace(/[^a-zA-Z0-9]+/g, '');
  this.selectionEnd = position;
});

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

作为替代方案，您也可以只听取change事件，然后替换该值;但是，这不会在输入时更新值。

Answer 2

当您按箭头键时，您正在更改输入的值，因此光标将失去其位置。这与您正在使用的正则表达式无关。

您不应在输入时修改用户输入。而是在.change() jQuery回调监听器上进行，而不是.keyup()

Answer 3

另一种方法是在keyup事件回调中执行event.preventDefault();，这解决了我的问题

输入＆＃39;替换keyup上的值时，元素的光标位置会被重置

3 个答案: