最近在写一个手机端提交表单的项目,里面用了不少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. 【多进程】php多进程编程

    先看下我已经安装的php版本 PHP (cli) (built: Jul ::) ( NTS ) Copyright (c) - The PHP Group Zend Engine v3.- Zend ...

  2. tesseract图像识别验证码:安装使用和避免坑

    安装使用 https://blog.csdn.net/kk185800961/article/details/78747595 避免的坑 http://www.mamicode.com/info-de ...

  3. Sharing is only supported for boot loader classes because bootstrap classpath has been appended

    在idea里面运行项目,terminal里面报“Java HotSpot(TM) 64-Bit Server VM warning: Sharing is only supported for boo ...

  4. CentOS7使用Qemu模拟ARM64

    准备 RPM包安装 yum安装交叉编译工具 yum install -y binutils-aarch64-linux-gnu gcc-aarch64-linux-gnu bison flex gli ...

  5. mysql 忘记/修改数据库密码

    window mysql 修改密码 方法1: 用SET PASSWORD命令 mysql -u root mysql> SET PASSWORD FOR 'root'@'localhost' = ...

  6. 挖矿病毒watchbog处理过程

    1 挖矿病毒watchbog处理过程 简要说明 这段时间公司的生产服务器中了病毒watchbog,cpu动不动就是100%,查看cpu使用情况,发现很大一部分都是us,而且占100%左右的都是进程wa ...

  7. Selenium(六)对话框处理与登录测试

    1.以百度为例,找到登录框,查看元素,可以看到这是一个div 操作登录框: 通过判断是否找到这个错误提示元素查看是否登录成功. 一个简单的登录脚本:

  8. ACM-ICPC 2018 青岛赛区现场赛 K. Airdrop && ZOJ 4068 (暴力)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=4068 题意:吃鸡游戏简化为二维平面上有 n 个人 (xi,yi) ...

  9. DisplayModeProvider完成移动开发自动视图解析

    MVC中新建视图命名:XXX.cshtml.XXX.mobile.cshtml:用手机访问会自动到xxx.mobile.cshtml 一.原理 MVC中是通过DisplayModeProvider实现 ...

  10. paramiko的使用

    import paramiko import sys user = "root" pwd = " # 上传文件 def sftp_upload_file(server_p ...