JQuery输入框中输入内容改变事件
封面图
•
2025-11-18
•
jQuery
236
0
0
0
在 jQuery 中，如果你想监听输入框（`<input>` 或 `<textarea>`）中内容的变化，可以使用 `.on('input', ...)` 事件来实现。这个事件会在用户输入内容时立即触发，适用于实时监听输入内容的变化。 ### 示例代码： ```html <!DOCTYPE html> <html> <head> <title>Input Change Event</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <input type="text" id="myInput" placeholder="请输入内容..."> <script> $('#myInput').on('input', function() { var inputValue = $(this).val(); console.log('输入的内容是：', inputValue); }); </script> </body> </html> ``` ### 说明： - `$('#myInput')`：选择器选中 ID 为 `myInput` 的输入框。 - `.on('input', ...)`：绑定 `input` 事件，当输入内容发生变化时触发。 - `$(this).val()`：获取当前输入框的值。 --- ### 其他相关事件对比： | 事件 | 触发时机 | 是否支持实时监听 | |------|----------|------------------| | `input` | 用户输入时立即触发 | ✅ 是 | | `change` | 输入框失去焦点后才触发 | ❌ 否 | | `keyup` | 每次按键释放时触发 | ✅ 是，但不如 `input` 精准 | > **推荐使用 `input` 事件**，因为它能更准确地捕捉到输入内容的每一次变化（包括粘贴、拖拽等操作）。 如果你有其他需求，比如只在特定条件下触发，或者处理表单提交前的验证，也可以告诉我，我可以进一步帮你扩展功能。
上一篇：
jquery unwrap函数介绍
下一篇：
jQuery操作checkbox选择
标题录入，一次不能超过6条
留言
评论