input标签相关

本文探讨了HTML input元素的change事件触发机制及其解决方案,如何处理input type=file类型的点击事件,表单内Button标签防止页面刷新的方法,以及利用accept属性和MIME类型实现文件类型的限制。同时介绍了使用FormData进行文件上传的具体步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.change事件:当input捕获到焦点后,系统储存当前值
,当input焦点离开后,判断当前值与之前存储的值是否不等,如果为true则触发onchange事件。
所以在js,操作dom进行赋值的情况下无法触发change事件。

解决:在进行赋值的时候顺带触发change事件,$(“#”).xx.trigger(“change”)

2.input type=file类型,无法通过js直接进行触发click事件弹框;

解决:通过隐藏input框,通过另一个Button的click事件在,handler函数进行触发,document.getElementById(“xxx”).click();或者使用label标签添加for属性与input type=”file”标签的id相关联,通过点击label标签触发input,弹出文件选择框;

3.表单内的Button标签点击会触发也面刷新,添加type=”button”解决,或者使用input type=”button”进行处理;

4.input的accept属性只能在弹出文件选择框后,不显示其他类型,可以通过显示全部文件避开,需要在filelist相应文件的type判断mime去进行文件限制;

mime类型参考:http://www.w3school.com.cn/media/media_mimeref.asp
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types

5.文件上传表单,使用formdata进行模拟表单提交,new formData()后,formdata.append(“fileName”,file);在xhr中提交即可;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值