最近在写一个手机端提交表单的项目,里面用了不少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. pytorch神经网络实现的基本步骤

    转载自:https://blog.csdn.net/dss_dssssd/article/details/83892824 版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载 ...

  2. POJ1083(Moving Tables)--简单模拟

    题目链接:http://poj.org/problem?id=1083 如图所示在一条走廊的两侧各有200个房间,现在给定一些成对的房间相互交换桌子,但是走廊每次只能通过一组搬运, 也就是说如果两个搬 ...

  3. SVN 问题解决之 Working copy path does not exist in repository

    同事的SVN更新时提示某个特定文件提示 Working copy path does not exist in repository svn更新会被这个错误打断,导致无法完全更新 删掉文件再更新仍然有 ...

  4. eclipse调试之edit source lookup path解决方案

    转自:https://blog.csdn.net/zkn_CS_DN_2013/article/details/48731133

  5. 在SAP云平台ABAP编程环境上编写第一段ABAP程序

    距2017年秋季的SAP TechEd大会上一位大佬Björn Goerke,SAP's Chief Technology Officer宣布了SAP Cloud Platform即将支持ABAP至今 ...

  6. kafka连接storm问题

    遇到缺少jar包的报错,参考https://www.jianshu.com/p/70c3a7f56386 参考上面的链接把jar包都放到storm/lib目录下后,使用localCluster的方法提 ...

  7. 惊呆!Java程序员等级一览

      凡人:买本书凑凑热闹,听得多写的少,过段时间就把老师教的都忘了.这个阶段是刷掉人最多的阶段,也是从凡人到程序员本质区别的阶段.你的日后成就在于你的习惯与态度.隔一段时间整理自己的知识体系是重中之重 ...

  8. 单元测试自动生成工具evosuite

    github地址:https://github.com/EvoSuite/evosuite 官网地址:http://www.evosuite.org   快速开始: 1.  junit  <de ...

  9. MacOS下安装unicorn这个库失败

    因为在Mac下安装pwntools,发现安装unicorn库的时候失败了,编译报错如下 make: *** [qemu/config-host.h-timestamp] Error 1 error: ...

  10. 安装sass时遇到Failed to build gem native extension

    错误信息 执行命令: sudo gem install sass时遇到下面的错误信息 Building native extensions. This could take a while... ER ...