chrome下input:file无法触发click事件的问题

最新推荐文章于 2022-05-28 10:21:31 发布
最新推荐文章于 2022-05-28 10:21:31 发布
阅读量9k 收藏
点赞数
分类专栏： Javascript 文章标签： chrome input file 浏览器

在chrome浏览器下，为了数据安全，隐藏的input：file不能trigger “click” 事件。  

所以要设置input：file的透明度达到隐藏的效果。

teresa502
关注
专栏目录
html 美化input file,文件上传input file简便美化方案(css)
weixin_42696271的博客
06-10 959
file,css文件上传input在各个浏览器里表现形式都不一样：ie6ie7,8,9ffchrome这里介绍一种简单实用的，在各种浏览器下表现一致的美化方法，效果如下：ie6无法美化，只能应用部分效果，如下：选择文件后(以ff为例，不用浏览器显示的路径不同)：html代码：复制代码代码如下:选择文件css代码：复制代码代码如下:body{font-size: 12px;text-align: l...
html5 input file img,HTML5读取input[type=file]中的图片
weixin_29290947的博客
06-19 888
概述在我们做用户注册的时候经常会设计到用户头像之类的上传，这时我们会用到一个标签，但是我们该怎样获取标签中选取的图片呢？这里我们使用HTML5中的FileReader接口来实现这样的操作。demo我用如下代码来讲述该怎样实现这样的操作：HTML代码：获取图片 首先，肯定会有一个已经，form写不写action和method无所谓，因为既然我们要用JS/JQ来获取表单的文件，那多半是要...
点击图片触发input是file的事件
07-21
window.createObjectURL 上传图片，实现web预览
chrome input上传file无响应
qq_30923243的博客
02-22 3118
Chrome浏览器上传文件无响应可能是因为搜狗输入法版本太低了。 上传文件前将输入法切换就好了。 （在哪看到的已经忘记了，大神对号入座吧）
input file 文件上传控件隐藏后用button触发它的click事件文件传不上去的解决方案...
weixin_34040079的博客
07-14 837
<HTML> <HEAD> <TITLE>upload</TITLE> <style> <!-- .addfileA{ position:relative; cursor:hand; text-decoration:none; background-image: url('C:\WI...
伪主动触发input:file的click事件
weixin_33693070的博客
12-02 1285
背景 从前，input:file是不能主动触发click事件的，据说是安全方面的考虑。因此，在美化input:file的时候就麻烦了，最通用的方案是，制作一个经过美化后的<button>，然后把input:file调整好尺寸，覆盖在<button>上方，然后再设置 opacity: 0;，如此一来，用户看到的是&l...
input:file 无法被触发的问题
virgo_ling的博客
01-25 2828
// 打开拍照 function startTakePic() { alert("开始拍照"); $("#camera").click(); closeDialog(); $("input").val(""); }
input file上传文件样式支持html5的浏览器解决方案
12-13
一个是file上传控件在火狐下无法通过css改变width，另一个是file上传控件在不同的浏览器下的外观和行为都不一样。 下面是file上传控件在IE10，firefox16，chrome22,opera12,safari5.1.7里的截图：  在IE10里，双击...
如何将input type=file显示的浏览变成英文的
06-26
4. **绑定事件处理器：** 为了实现在用户选择文件后更新文本输入框中的值，我们需要绑定一个`onChange`事件处理器到隐藏的`<input type="file">`元素。 ```html <input type="file" name="picpath" id="picpath...
移动端中click事件300ms延时问题解决方案
caidezhi123456的博客
05-28 1582
在解决这个问题我们先了解一下为什么会延迟300ms 在我们使用移动app时我们都会用两个手指捏和扩张，来缩小或者放大页面，之后我们会双击屏幕来恢复初始页面 这时候就会触发
js实现input:file的click事件
aeo41593的博客
03-01 753
div class = "clp" onclick = "clp();">从相册中选择图片</div> <input type="file" id="File" /> <br> <br> <br> <br> <br> <br> <div class = "clp...
html 自动click事件,HTML onClick事件不会触发
weixin_36278817的博客
05-30 709
需要一些帮助。这看起来像是一段简单的代码，但我很难理解为什么事情没有正常工作。 onClick事件showdiv(n)工作得很好。但onClick事件hidediv()不会。奇怪的是，如果我在Firebug控制台上键入“hidediv(1)”，那么javascript语句就可以正常工作。但是当事件附加到div被点击时，js代码不会被执行。下面的代码：HTML onClick事件不会触发functi...
input标签绑定click事件无反应
失眠因为想太多
08-03 5303
最开始我写的代码是 $("input[name=insert_files]").click(function(){ alert(1); }); 怎么点击都不会alert,由于input是个动态生成的数组，逐个绑定我就不开心了 也就是由于我的input是动态生成的，所以上面的写法才不能用 于是我将动态生成的选择器部分放在了on的第二个参数中，前面的选择器取得是dom上面已有的元素，经
以input=file方式，获取文件时，在IE下8无法通过某个按钮click事件间接触发input=file的change事件...
weixin_30337251的博客
09-18 536
最近在项目中遇到了许多上传问题，公司内部的组件，通过form上传，需要使用input=file触发选择文件， 因为input=file在各个浏览器中显示的样式是不同的，谷歌，火狐，IE都有所不同，而且不太美观，所以为了解决 这一个问题，一开始采用了隐藏input=file 然后通过一个显示的button间接触发input=file的click事件如下 <inpu...
file input 点击没反应_解决input file，实现点击文字上传文件
weixin_42299066的博客
02-23 1911
需求： 点击文字“资料提交”，实现文件上传圈是的编小久据直请结未屏屏会气机页实应高 难点： input本身的file样式，文字无法修能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果改点击文字触发input的click事件是不行的解决：将input和文字通过定位，使得input和文字重合将input设置为透明，若input在文字前还的加上z-index:100,...
file input 点击没反应_解决input file按钮要点击两次才弹出选择文件窗口
weixin_39646725的博客
01-15 1146
在隐藏的文件输入框上调用click()方法从Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)开始，你可以隐藏掉默认的的文件输入框元素，使用自定义的界面来充当打开文件选择对话框的按钮。实现起来很简单，你只需要使用样式display:none把原本的文件输入框隐藏掉，然后在需要的时候调用它的click()方法就行了。考虑下面的HTML：Se...
html不弹出文件选择框,chrome 66下setTimeout回调中触发input type=file的click事件，无法弹出文件选择框？...
weixin_33396759的博客
06-04 1416
问题描述chrome 66，在setTimeout回调中触发type为file的input框的点击事件，文件选择框是否弹出和时长有关操作系统：windows 7浏览器：chrome 661000ms以上：上传的文件框未弹出1000ms以下：上传的文件框弹出操作系统：windows 7浏览器：chrome 755000ms以上：上传的文件框未弹出，控制台有提示File chooser dialog ...
html输入框点击不响应,弹出框中的input无法响应动态输入事件
weixin_39543758的博客
06-09 365
分类名称分类标识取消确认$("button#type_edit_up").click(function(){vartype_id=$('input#e_id').val();varvalue=$('input#edit_value').val();varname=$('input#edit_name').val();alert(value);returnfalse;varself=$...
js实现input:file的click
windows编程
11-27 3116
有过尝试的人都知道，对于input:file的样式难看的处理方法，一般都是透明化input，实际点击的还是input:file，使用js操纵？   $("#File").click()？这该是大家都会想到的方法，可是，很不好意思，无法起到作用，经过一番查阅，终于找到js操作呢input:file的方法，很简单 function clp(){    return  $("#File").clic
掌握Chrome调试工具：Element、Network与事件监听
Chrome调试是Google Chrome浏览器的一项强大功能，对于前端开发者来说，它提供了丰富的工具以优化网页性能、诊断问题和调试代码。本文将深入探讨Chrome的四个主要调试工具：Element、Network、Sources和Console，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值