最近在写一个手机端提交表单的项目,里面用了不少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里的内容文本被选中后执行一段,只要选择了就会触发,不是非得全部选中

8.oninput 当input的value值发生变化时就会触发,不用等到失去焦点(与onchange的区别)

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

表单事件集锦-input的更多相关文章

  1. oninput等表单事件

    oninput等表单事件 过去我们常使用keydown和keyup辅助表单元素的处理,这要求处理时,表单元素必须处于激活(聚焦)状态.oninput事件可以实时监听文本框的输入变化.   现代浏览器支 ...

  2. HTML:form表单总结,input,select,option,textarea,label

    <form>标签是块级元素. form标签的标准属性有id,class,style,title,lang,xml:lang. 表单能够包含input元素(包含button,checkbox ...

  3. Day050--jQuery表单事件 轮播图 插件库 ajax

    表单控件的事件 change()表单元素发生改变时触发事件 select()文本元素发生改变时触发事件 submit()表单元素发生改变时触发事件 .focus() 获取焦点 .blur() 释放焦点 ...

  4. sbadmin表单事件

    Form表单 自定义表单 <from action="" method="'><!---      这里可以用表单组件快速生成表单元素哦        ...

  5. (96)Wangdao.com_第二十九天_表单事件

    表单事件 input 事件        select 事件        change 事件        invalid 事件        reset 事件         submit 事件 ...

  6. javascript中的常用表单事件用法

    下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...

  7. jQuery-3.事件篇---表单事件

    jQuery表单事件之blur与focus事件 在之前2.8与2.9节我们学过了表单处理事件focusin事件与focusout事件,同样用于处理表单焦点的事件还有blur与focus事件 它们之间的 ...

  8. jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

  9. jQuery学习- 表单事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. IE浏览器下载后台返回的Excel文件,报错400

    问题描述(见下图): 问题分析: 400是后端没有接收到请求 原因是后端高版本的tomcat不会自动对字符串进行转义 所以,前端把参数值进行转义,即encodeURI(string) 问题处理前代码( ...

  2. bond模式详解

    目录 bond模式详解 一.什么是bond? 二.为什么使用bond? 三.bond模式配置 1.配置linux bond 2.将bond绑定到ovs上面(可选) 四.bond模式 1.模式0 2.模 ...

  3. Route Loops

    当网络10.4.0.0发生故障时,RouterC检测到故障,并停止其E0接口的路由报文. 然而,路由器A和B还没有收到失败的通知. 路由器A仍然认为可以通过路由器B访问10.4.0.0.路由器A的路由 ...

  4. IDEA光标跟随原因是jdk载入的问题BUG 修正 需要I安装最新版本1.8JDK 1.9之后的不清楚 谨慎

    解决方法是 选择jdk本地版本 重启就好了 https://blog.csdn.net/Utopia_Zq/article/details/81190300?utm_source=blogxgwz2 ...

  5. 9.jsonp的实现原理

    1. 由于浏览器的安全性限制,不允许AJAX访问 协议不同.域名不同.端口号不同的数据接口,浏览器认为这种访问不安全:2. 以通过动态创建script标签的形式,把script标签的src属性,指向数 ...

  6. 爬虫部署 --- scrapyd部署爬虫 + Gerapy 管理界面 scrapyd+gerapy部署流程

    ---------scrapyd部署爬虫---------------1.编写爬虫2.部署环境pip install scrapyd pip install scrapyd-client 启动scra ...

  7. 成功解决 AttributeError: module 'tensorflow.python.keras.backend' has no attribute 'get_graph'

    在导入keras包时出现这个问题,是因为安装的tensorflow版本和keras版本不匹配,只需卸载keras,重新安装自己tensorflow对应的版本就OK了.可以在这个网址查看tensorfl ...

  8. 2018/7/31--zznu-oj-问题 G: 方差 普拉斯--【两重暴力循环求方差即可!】

    问题 G: 方差 普拉斯 时间限制: 1 Sec  内存限制: 128 MB提交: 94  解决: 17[提交] [状态] [讨论版] [命题人:admin] 题目描述 方差(样本方差)是每个样本值与 ...

  9. 一致性Hash算法(转载)

    原文地址http://blog.csdn.net/caigen1988/article/details/7708806   consistent hashing 算法早在 1997 年就在论文 Con ...

  10. Oracle不足补零函数

    ,') from dual ,') from dual ,') from dual ,') from dual ,') from dual