input 标签的监听事件总结

最近在写一个手机端提交表单的项目,里面用了不少input标签,因为项目不太忙,所以,想做的完美点,但是遇到了一些问题,比如:页面中的必填项如果有至少一项为空,提交按钮就是不能提交的状态,所以需要对所有的input内容进行监听,刚开始我用了jquery的keyup事件解决问题,但是后来测试出一个bug,如果用户选择粘贴复制的话,keyup事件不能触发,也就不能通过判断input内容来改变提交按钮的状态。下面就这种问题做下总结,希望对自己和他人以后能有点帮助。

1.onfocus  当input 获取到焦点时触发

2.onblur  当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发相应的js

3.onchange 当input失去焦点并且它的value值发生变化时触发

4.onkeydown 在 input中有键按住的时候执行一些代码

5.onkeyup 在input中有键抬起的时候触发的事件,在此事件触发之前一定触发了onkeydown事件

6.onclick  主要是用于 input type=button,当被点击时触发此事件

7.onselect  当input里的内容文本被选中后执行一段,只要选择了就会触发,不是非得全部选中

以上事件可以直接放到input的属性里,例如:<input type="text" onfocus="a();" onblur="b()" onchange="c();" onkeydown="d();" />,也可以通过js给input dom元素添加相应的事件,如:document.getElementByTagName(‘input‘).onfocus = function();

时间: 2024-10-25 03:26:00

input 标签的监听事件总结的相关文章

input标签的监听事件

监听事件的触发是完成交互的一个重要组成部分,现将input标签的监听事件整理如下. onfocus         当input 获取到焦点时触发. onblur            当input失去以获取到焦点时触发. 1.1  onchange      当input失去焦点并且它的value值发生变化时触发. 1.2  onpropertychange    只要当前对象属性发生改变,都会触发事件,IE专属(6.7.8). onkeydown   在 input中有键按住的时候触发事件.

JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log("aaaaa"); }); JQ: $("input对象").bind("input  propertychange",function(){ console.log("aaaaa"); }): MUI 清除按钮的点击的监听:

001.input添加监听事件

<script> var Event = { // 通过on接口监听事件eventName // 如果事件eventName被触发,则执行callback回调函数 on: function (eventName, callback) { //你的代码 if (!this.handles) { //this.handles={}; Object.defineProperty(this, "handles", { value: {}, enumerable: false, co

js html 交互监听事件学习

事件处理程序(handler): HTML事件处理程序: <input type="button" value="Click Here" onclick="showMessage();" /> <script type="text/javascript"> function showMessage() { alert('Clicked!'); } JavaScript指定事件处理程序: <inpu

jquery中,使用append增加元素时,该元素的绑定监听事件失效

举例:如果在一个<div id="resultArea"></div>中,通过append添加一个id="checkOutTip"的文本框,监听值变化.常用的直接$("Selector").on("eventType",function(){})监听事件函数不起作用,例如该按钮的点击监听事件应该这样写: $("#resultArea").on("input property

javascript事件有哪些?javascript的监听事件

1 事件类型: 2 1.界面事件 3 onload:描述文档,图片,css已经frame,object加载完毕时触发,window.onload 4 window.onload = function(){ 5 //代表图片,dom元素,iframe,css加载完毕以后 6 //才触发的事件 7 } 8 $(function(){ 9 //dom css js 初始化就加载事件 10 //调用了图片的unload事件 11 }); 12 13 onunload:移除加载事件 14 onabort:

关于AngularJs中监听事件及脏循环的理解

可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个scope函数$watch,它包含了三个参数,首先我们在概念上来了解一下: $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchE

softInputMode- 软件盘监听事件

软件盘的监听事件,如下 private final OnKeyListener mSubjectKeyListener = new OnKeyListener() { @Override public boolean onKey(View v, int keyCode, KeyEvent event) { if (event.getAction() != KeyEvent.ACTION_DOWN) { return false; } // When the subject editor is e

201507221403_《backbone之一——新建模型和集合、实例化模型、模型上监听事件的方法、模型设置和获取后台数据、配置理由方法、视图绑定事件的方法、绑定模型等》

一 . 新建 var model_1 = new Backbone.Model({'name':'hello'}); var model_2 = new Backbone.Model({'name':'hi'}); var models = new Backbone.Collection(); models.add( model_1 ); models.add( model_2 ); alert( JSON.stringify(models) ); 二. 实例化模型 var M = Backbo