如何实现输入框文本删除时触发TextEdit函数？当前仅失焦时更新

嘿，这个问题很好解决！你当前使用的onblur事件只有在输入框失去焦点时才会触发，所以删除文本的时候没法立刻更新目标链接的内容。咱们只需要把触发事件换成oninput，就能实现每次修改输入框内容（包括删除）都实时同步的效果。

修改后的完整代码 #

JavaScript 逻辑 #

function textEdit(e) { 
  document.getElementById("outputTxtBtn").innerHTML = e.value; 
}

HTML 结构 #

<input type="text" name="title" id="inputTxtBtn" value="About me" oninput="textEdit(this)" /> 
<a title="About me" id="outputTxtBtn" href="#">About Me</a>

为什么这个方法有效？ #

• oninput是HTML5专门为输入控件设计的事件，它会在输入框内容发生任何变化时立即触发——不管是通过键盘输入、删除字符，还是用鼠标粘贴/剪切文本，都能被捕捉到，完美满足你实时更新的需求。
• 如果需要兼容非常老旧的浏览器（比如IE8及更早版本），可以额外补充onkeyup和onpaste事件（像这样：oninput="textEdit(this)" onkeyup="textEdit(this)" onpaste="textEdit(this)"），不过现在绝大多数现代浏览器都原生支持oninput，单独使用它就足够啦。

内容的提问来源于stack exchange，提问作者John