Question

我的HTML代码输入，我想只更改此输入中的特定单词。

<input type="text" value="Input that I want to change only **this** word" id="inpWord">

当我按下此输入时，只更改单词 this ，当我输入/删除其他单词时阻止我。

我怎么能在Jquery上做到这一点？

Answer 1

我建议为input event添加一个事件监听器，该值在更改时同步触发（包括粘贴值时）。如果要删除所需单词周围的任何可选空格，可以将/\s*this\s*/g替换为' '。

var input = document.querySelector('input');

input.addEventListener('input', function(event) {
  this.value = this.value.replace(/\s*this\s*/g, ' ');
});

input { width: 100%; line-height: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" value="Input that I want to change only this word">

但是，您会注意到存在问题。输入插入符号将在您键入时跳转到字段的末尾，因为input元素的整个值正在更新。为避免这种情况，您可以实现this solution，其中捕获插入符的初始位置，然后在替换值后更新：

var input = document.querySelector('input');

input.addEventListener('input', function(event) {
  var target = event.target;
  
  // Capture initial position
  var position = target.selectionStart;

  // This triggers the cursor to move.
  target.value = target.value.replace(/\s*this\s*/g, ' ');

  // Set the cursor back to the initial position.
  target.selectionEnd = position;
});

input { width: 100%; line-height: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" value="Input that I want to change only this word">

Answer 2

$('#inpWord').on('keyup',function(){
  str = $(this).val().replace('this','that')
  $(this).val(str)
});

Answer 3

我会用这样的东西。它将替换您的所有实例及其不区分大小写。它将响应更改，加密和粘贴事件。试试看： - ）

$('#replace').on('keyup paste change',function(){
  this.value = this.value.replace(/this/gi,'that');
});

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

JQuery输入只改变特定的单词

3 个答案: