大家用到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. J2SE 8的Lambda --- functions

    functions //1. Runnable 输入参数:无 返回类型void new Thread(() -> System.out.println("In Java8!" ...

  2. 使用Travis进行持续集成

    使用Travis进行持续集成 廖雪峰 持续集成:Continuous Integration,简称CI,意思是,在一个项目中,任何人对代码库的任何改动,都会触发CI服务器自动对项目进行构建,自动运行测 ...

  3. 机器学习入门-混淆矩阵-准确度-召回率-F1score 1.itertools.product 2. confusion_matrix(test_y, pred_y)

    1. itertools.product  进行数据的多种组合 intertools.product(range(0, 1), range(0, 1))  组合的情况[0, 0], [0, 1], [ ...

  4. as3 air 获取文件夹下的所有文件

    private function getFile(directory:File) { var files:Array = directory.getDirectoryListing(); for(va ...

  5. as3与php交互

    (1)直接读取 php: <? $state="开始接收"; $var1="收到"; echo "state=".$state.&qu ...

  6. ABAP-ALV报表导出格式恢复初始画面

    进入一个ALV表格,想下载数据,一般点清单-->输出-->电子数据表. 会出来一个对话框,可选择导出成各类格式. 在下端有一个“始终使用选定的格式”,一旦勾上,就再也不会弹出选择框了. 以 ...

  7. UI5-文档-2.4-Node.js-Based开发环境

    用于修改OpenUI5.环境是基于Node.js,用作服务器,具有一个基于Grunt的构建过程.本节提供关于初始设置.开发工作流和测试执行的信息. 常规开发过程: 不需要构建过程,您可以简单地修改任何 ...

  8. CDLinux制作成U盘启动

    由于CDLinux在虚拟机跑的时候无法识别集成的笔记本网卡,故在此进行一下相关步骤的整理. 工具: U盘 UNetbootin 步骤: 1.插入U盘到电脑.不一定要在操作之前进行格式化,我目前的U盘分 ...

  9. Lodash踩坑记录

    一直在用lodash 这个框架,最近踩了一个坑 reverse 这个函数是mutable的 ,后边去查了文档 Note: This method mutates array and is based ...

  10. apply和call用法

    资料来源:http://blog.csdn.net/business122/article/details/8000676 Js apply方法详解 我在一开始看到javascript的函数apply ...