监听输入框
来源:互联网 发布:成都软件专修学院 编辑:程序博客网 时间:2024/05/20 15:58
想要实时监听输入框的数据,可以有以下几种方法:
1 oninput方法
body><label><input id="input" type="text"></label><p title="选择你最喜欢的水果?">输入的内容:<span id="text"></span></p><script>$('#input').on('input',function(){ $('#text').text($(this).val())});</script>
oninput 事件在用户输入时触发。
该事件在 或 元素的值发生改变时触发。
该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 和 元素。
这种方法是比较完美的方法,只要输入框的值发生变化就会导致事件发生,同步发生并且支持键盘、鼠标操作。
2 keyup方法
$('#input').on('keyup',function(){ $('#text').text($(this).val())});
完整的 key press 过程分为两个部分,按键被按下,然后按键被松开并复位。
当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。
keyup() 方法触发 keyup 事件,或规定当发生 keyup 事件时运行的函数。
在实时监听输入框的过程中,keyup是比较适合的,keydown和keypress会有一个字符的延迟。
但是keyup也有一个问题,对纯鼠标粘贴过来的文字变化并不会触发事件。
3 change方法
$('#input').on('change',function(){ $('#text').text($(this).val())});
当元素的值发生改变时,会发生 change 事件。
该事件仅适用于文本域(text field),以及 textarea 和 select 元素。
change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。
注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生。
这种方法的缺点是只有在失去焦点后才会触发事件,所以不是实时的。
参考
- http://www.w3school.com.cn/jquery/event_change.asp
- http://www.w3school.com.cn/jquery/event_keypress.asp
- http://www.runoob.com/jsref/event-oninput.html
0 0
- 动态监听输入框
- 监听输入框
- 监听输入框
- 监听input框输入的监听事件
- 监听输入框的输入变化
- 监听输入框时时输入内容
- HTML 输入框input事件监听实例
- UIAlertController 自定义输入框及KVO监听
- UIAlertController 自定义输入框及KVO监听
- 实现监听输入框字符的变化
- jquery实时监听输入框值变化
- jQuery监听输入框的值变化
- 总结 input propertychange 监听输入框
- js实时监听输入框的值
- 监听input输入框的值得变化
- input输入框内容变化实时监听
- 实时监听输入框的内容
- UITextField可以快捷监听输入框输入文字
- Android +camara
- Android系统设置命令— android.provider.Settings
- Maven打包war
- 日间模式切换
- Java实现MD5加密(一)
- 监听输入框
- 【LeetCode】Best Time to Buy and Sell Stock II 解题报告
- RHEL7--UNIT14-linux设备访问
- android 自定义控件
- oracle中rownum、rowid、row_number()、rank()、dense_rank()的用法
- mysql查看表计划
- linux 用vi命令的使用以及vi编辑后的后续保存退出等相关命令的使用
- lattice 包高级绘图函数
- 在Linux系统中,在防火墙中添加端口