时间戳

首页 > 解决方案 > 输入事件上的正则表达式和 Jquery 问题

javascript - 输入事件上的正则表达式和 Jquery 问题

问题描述

使用正则表达式仅允许某些字符时遇到问题。问题是当我尝试将字符插入单词以纠正错误时。当我尝试插入新字符时，光标移动到输入框的末尾。

这是我使用的代码：

$('body').on('input','.info',function() {
        this.value = this.value.replace(/[^a-zA-Z0-9+&,*_\- \b \r ]/g, '');

有什么提示吗？

先感谢您

标签： javascriptjqueryinput

解决方案

您需要保存字符索引 (the selectionStart)，以便在值更改完成后重新定位到它，如果需要进行值更改：

$('body').on('input', '.info', function(e) {
  const index = this.selectionStart - 1;
  const replaced = this.value.replace(/[^a-zA-Z0-9+&,*_\- \b \r ]/g, '');
  if (replaced !== this.value) {
    this.value = replaced;
    this.selectionStart = index;
    this.selectionEnd = index;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="info">

推荐阅读