资讯专栏INFORMATION COLUMN

表单事件集锦-input

Michael_Lin / 442人阅读

最近在写一个手机端提交表单的项目,里面用了不少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的属性里,例如:,也可以通过js给input dom元素添加相应的事件,如:document.getElementByTagName("input").onfocus = function();

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112904.html

相关文章

  • 表单事件集锦-input

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

    darry 评论0 收藏0
  • 表单事件集锦-input

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

    william 评论0 收藏0
  • #yyds干货盘点# 前端基础知识面试集锦1

    摘要:作用标准模式与兼容模式各有什么区别声明位于位于文档中的第一行,处于标签之前。又称内核及以上版本,等内核及以上。存储大小数据大小不能超过。可以防止恶意刷票论坛灌水有效防止对某一个特定注册用户用特定程序暴力方式进行不断的登陆尝试。 HTMLDoctype作用?标准模式与兼容模式各有什么区别?(1)、声明位于位于HT...

    番茄西红柿 评论0 收藏2637
  • 微信小程序知识总结及案例集锦

    摘要:对微信小程序进行全局配置,决定页面文件的路径窗口表现设置网络超时时间设置多等。 微信小程序知识总结及案例集锦 微信小程序的发展会和微信公众号一样,在某个时间点爆发 学习路径 微信小程序最好的教程肯定是官方的文档啦,点击这里直达 微信官方文档 认真跟着文档看一遍,相信有vue前端经验的看下应该就能上手了,然后安装 微信小程序开发者工具 新建一个quick start项目,了解代码结构,...

    sean 评论0 收藏0
  • VueJS 开发常见问题集锦

    摘要:由于公司的前端开始转向,最近开始使用这个框架进行开发,遇到一些问题记录下来,以备后用。查了一下,发现可能是打包或是资源引用问题,目前该问题还未被妥善处理,需要通过一些来解决这个问题。为解决这个问题,中提供了方法对象受现 showImg(https://segmentfault.com/img/bVFgor?w=1280&h=720); 由于公司的前端开始转向 VueJS,最近开始使用这...

    hedge_hog 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<