[英]Constant function run when user typing into input tag
I am wondering how I would have the TextEdit function run every time the text is removed. 我想知道如何在每次删除文本时运行TextEdit函数。 Currently, it is only updating when I unfocus the input tag. 目前,只有在我对输入标签失去焦点时才会更新。
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>
Use the oninput
to listen for any type of value modification 使用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>
To prevent unwanted scripts injection use textContent
instead of innerHTML
. 为防止不需要的脚本注入,请使用textContent
而不是innerHTML
。
To keep your JS well contained and easy debuggable - remove inline JS from your HTML markup 为了保持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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.