前端在做 input file 美化的时候，通常 把 input 定位position 到 已美化的按钮最上方 opacity: 0

HTML5时代，已有更方便的方法，点击美化按钮直接触发选择文件事件

<span @click="$refs.inputFile.click()">

     选择文件

</span>

<input type="file" ref="inputFile" style="display:none"  multiple />

我这ref 是VUE里的，理解为id吧，不用VUE的话，直接 id=‘inputFile’ 是一样的

这样简单多了

伪触发 input file 的click事件的更多相关文章

  1. 【JS】 伪主动触发input:file的click事件

    大家用到input:file标签时,对于input:file的样式难看的处理方法一般有2种: 采用透明化input:file标签的方法,上面放的input:file标签,下面放的是其他标签,实际点击的 ...

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

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

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

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

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

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

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

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

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

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

  7. 关于IOS浏览器：document,body的click事件触发规则

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  8. click事件触发也有失灵的时候？

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  9. bootstrap 3 中表单元素的写法 ---- 重点是 input file 元素的

    我们知道file元素,因为有许多的插件可以使用,往往我们不需要写样式,但是如果要求我们自己写样式(利用bootstrap 3)实现一个file极简样式如何写呢? 下面我们先来看看整个表单的样子! 重点 ...

随机推荐

  1. 【CF833D】Red-Black Cobweb（点分治）

    [CF833D]Red-Black Cobweb(点分治) 题面 CF 有一棵树,每条边有一个颜色(黑白)和一个权值,定义一条路径是好的,当且仅当这条路径上所有边的黑白颜色个数a,b满足2min(a, ...

  2. 【arc073e】Ball Coloring（线段树，贪心）

    [arc073e]Ball Coloring(线段树,贪心) 题面 AtCoder 洛谷 题解 大型翻车现场,菊队完美压中男神的模拟题 首先钦定全局最小值为红色,剩下的袋子按照其中较大值排序. 枚举前 ...

  3. Zabbix-proxy安装部署

    原文链接:https://www.cnblogs.com/irockcode/p/6754659.html 环境: 因为公司需要监控远程客户机,但server端无法主动连接agent端,客户端可以连接 ...

  4. Centos 6.x/7.x yum安装php5.6.X

    鉴于Centos 默认yum源的php版本太低了,手动编译安装又有点一些麻烦,那么如何采用Yum安装的方案安装最新版呢.那么,今天我们就来学习下如何用yum安装php最新版. 1.检查当前安装的PHP ...

  5. 让Mac 可以使用mysql -u用户直接连接数据库

    在执行完安装版本的mysql数据库后,会发现执行mysql还是会出现 command not found的错误:解决方案 方案1.设置软连接到/usr/local/bin下在命令行下输入如下 ln - ...

  6. Linux网络那点事（CentOS、Ubuntu、Kali）

    跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 在Ubuntu18.04中,传统的配置/etc/network/interfa ...

  7. MongoDb 命令查询所有数据库列表

    原文:http://blog.csdn.net/huxu981598436/article/details/47216493 MongoDb 命令查询所有数据库列表 CODE: > show d ...

  8. 每个Java程序员需要了解的8个Java开发工具

    每个Java程序员需要了解的8个Java开发工具 Java是计算机应用程序编程语言,被广泛用于创建Web应用.服务器处理.用户端的API开发乃至数据库等多个领域.下面列出了8个有助于你开发Java应用 ...

  9. C# Winfrom 发送邮件验证码&Timer控件

    邮件发送: //定义一个全局的string类型的验证码: string yzm = ""; //定义一个字符串,这里面包含所有需要的验证码的元素: string a = " ...

  10. 洛谷P3396 哈希冲突

    分块还真是应用广泛啊...... 题意:求 解:以n0.5为界. 当p小于n0.5的时候,直接用p²大小的数组储存答案. 预处理n1.5,修改n0.5. 当p大于n0.5的时候,直接按照定义计算,复杂 ...