大家用到input:file标签时，对于input:file的样式难看的处理方法一般有2种：

  1. 采用透明化input:file标签的方法，上面放的input:file标签，下面放的是其他标签，实际点击的还是上面的input:file标签，这种方法考验开发的样式水平了，不在细说
  2. 采用js去控制，触发input:file标签的click事件。这样就可以使用漂亮的图案来替换input:file的位置，代码如下：
 <html>

 <head>

 </head>

 <body>

     <input type="file" id="fileElem"  style="display：none" >

     <button href="#" id="fileSelect" onclick="openBrowse()">Select some files</button>

 </body>

 <script>

     function openBrowse(){

         var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false;

         if(ie){ 

             document.getElementById("fileElem").click(); 

         }else{

             var a=document.createEvent("MouseEvents");

             a.initEvent("click", true, true);

             document.getElementById("fileElem").dispatchEvent(a);

         }

     }

 </script>

 </html>

【JS】 伪主动触发input:file的click事件的更多相关文章

  1. 伪触发 input file 的click事件

    前端在做 input file 美化的时候,通常 把 input 定位position 到 已美化的按钮最上方 opacity: 0 HTML5时代,已有更方便的方法,点击美化按钮直接触发选择文件事件 ...

  2. 给js创建的一个input数组绑定click事件

    <html> <body> <input type="button" name="input[]" value="按钮1 ...

  3. 如何用按钮的click事件去触发a标签的click事件

    在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...

  4. 主动触发input框的失去焦点事件，阻止输入法跳出

    今天遇到个问题,我在手机做一个选择生日的功能,但是当我点击input框时,事件选择插件和输入法都弹出来了,很丑,然后就想阻止输入法弹出来, 网上一个方法是:在input框的获取焦点事件里,主动触发失去 ...

  5. js jq 主动触发事件

    js的自定义事件与触发 //主动触发事件:触发鼠标被按下事件 var btn2 =document.getElementById("btn2"); var btn = docume ...

  6. JQuery的click,trigger触发a标签的click事件无效的问题分析

    今天在做一个手机端webAPP链接下载的时候,给a标签一个下载链接,但是通过 <a id="downFile" download="" href=&quo ...

  7. 使用jquery trigger 触发a标签的click事件取代window.open方法

    var ohtml='<div class="friend-dialog tac pt15 pb20">'+ '<div class="f-h32&qu ...

  8. echarts中的区域缩放组件dataZoom，主动触发选区缩放点击事件

    options设置 toolbox: { // 工具栏 feature: { dataZoom : { // 选时间缩放功能 show : true, // show为true时,才能触发takeGl ...

  9. 移动端触发touchend后阻止click事件

    // vue里面简单的处理方式,可以同时兼容PC和移动端 <div @touchend.stop.prevent="doSomething" @click.stop.prev ...

随机推荐

  1. JAVA 常用注解( JDK, Spring, AspectJ )

    JDK自带注解   @Override   表示当前方法覆盖了父类的方法   @Deprecation   表示方法已经过时,方法上有横线,使用时会有警告   @SuppviseWarnings    ...

  2. JAVA servlet 上传文件(commons-fileupload, commons-io)

    <1>获取二进制文件流并输出 InputStream inputStream = request.getInputStream(); BufferedReader reader = new ...

  3. vi和vim的三种模式

    1.一般模式 用vi 或vim 命令 ——>一般模式 2. 插入模式 i,o,a,r 及其各自大写 ——>插入模式 一般用 i 3.命令行模式 用命令来完成 读取,存盘,替换,离开vim ...

  4. 机器学习入门-贝叶斯中文新闻分类任务 1. .map(做标签数字替换) 2.CountVectorizer(词频向量映射) 3.TfidfVectorizer(TFDIF向量映射) 4.MultinomialNB()贝叶斯模型构建

    1.map做一个标签的数字替换 2.vec = CountVectorizer(lowercase=False, max_features=4000)  # 从sklean.extract_featu ...

  5. eclipse 创建注释模板

    使用  Alt+Shift+J 可以快速注释. 我们每次手动敲入作者,时间,版本等信息,有一些重复,可通过设置eclipse注释模板,减少工作量. Window -> preference -& ...

  6. 12 python json&pickle&shelve模块

      1.什么叫序列化 序列化是指把内存里的数据类型转变成字符串,以使其能存储到硬盘或通过网络传输到远程,因为硬盘或网络传输时只能接受bytes(字节) 2.用于序列化的两个模块,json和pickle ...

  7. spring cloud： eureka搭建

    1. 添加pom 依赖: <parent> <groupId>org.springframework.boot</groupId> <artifactId&g ...

  8. Mysql count+if 函数结合使用

    Mysql count+if 函数结合使用 果林椰子 关注 2017.05.18 13:48* 字数 508 阅读 148评论 0喜欢 1 涉及函数 count函数 mysql中count函数用于统计 ...

  9. spark 创建稀疏向量和矩阵

    http://blog.csdn.net/canglingye/article/details/41316193 [相互转换]:http://stackoverflow.com/questions/3 ...

  10. godaddy nginx https 配置

    一. 生成秘钥key,运行: $ openssl genrsa -des3 -out server.key 2048 1 会有两次要求输入密码,输入同一个即可 输入密码 然后你就获得了一个server ...