当用户键入输入标记时，会运行常量函数

Question

我想知道如何在每次删除文本时运行TextEdit函数。 目前，只有在我对输入标签失去焦点时才会更新。

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

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

Answer 1

使用oninput侦听任何类型的值修改

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

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

为防止不需要的脚本注入，请使用textContent而不是innerHTML 。
为了保持JS包含良好且易于调试 - 从HTML标记中删除内联JS

 function textEdit() { document.querySelector(this.getAttribute("data-textedit")).textContent = this.value; } [...document.querySelectorAll("[data-textedit]")].forEach(el => el.addEventListener("input", textEdit) ); 

 <input data-textedit="#outputTxtBtn" type="text" name="title" value="About me"> <a id="outputTxtBtn" href="#!">About me</a><br> <input data-textedit="#test" type="text" name="title" value="Lorem"> <p id="test" href="#!">Lorem</p>