如何在 jQuery 中检测文本输入框的变化
答案:使用 input
事件
您可以使用 on()
方法将 input
事件绑定到输入文本框,以检测其中的任何更改。
当您在输入字段中键入内容时,以下示例将显示输入的值。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery 检测输入字段的变化</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#myInput").on("input", function(){
/* 在 div 框中打印输入的值 */
$("#result").text($(this).val());
});
});
</script>
</head>
<body>
<p><input type="text" placeholder="Type something..." id="myInput"></p>
<div id="result"></div>
</body>
</html>
请注意,input
事件会在键盘输入、鼠标拖动、自动填充甚至复制粘贴时触发。 但是,如果您在输入中粘贴相同的字符串或选择并重新键入相同的字符等,它不会触发。
此外,如果您在此处使用 change
事件,它不会按预期工作,因为在文本输入的情况下,change
事件仅在元素失去焦点时触发(即 onblur)。 试试上面的例子,将字符串 "input"
替换为 "change"
(第 8 行),看看它是如何工作的。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答: