javascript - 替换 keyup 上的值时重置 'input' 元素的光标位置

Question

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

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

感谢您的帮助。

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 事件，然后替换值；但是，这不会在 输入时更新值。