前端在做 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. 深度分析Java的枚举类型—-枚举的线程安全性及序列化问题

    原文:深度分析Java的枚举类型--枚举的线程安全性及序列化问题 枚举是如何保证线程安全的 要想看源码,首先得有一个类吧,那么枚举类型到底是什么类呢?是enum吗?答案很明显不是,enum就和clas ...

  2. 【Luogu2197】NIM游戏（博弈论）

    题面 洛谷 题解 \(Nim\)游戏模板题 #include<iostream> #include<cstdio> #include<cstdlib> using ...

  3. 小电阻之大作用——CAN终端电阻

    CAN总线终端电阻,顾名思义就是加在总线末端的电阻.此电阻虽小,但在CAN总线通信中却有十分重要的作用. 终端电阻的作用 CAN总线终端电阻的作用有两个: 1.提高抗干扰能力,确保总线快速进入隐性状态 ...

  4. hdu 1907 （尼姆博弈）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1907 Problem Description Little John is playing very ...

  5. Jupyter-Notebook 删除指定 kernel

    原来是Python3+C# 查看列表jupyter kernelspec list 删除指定kernel:jupyter kernelspec remove icsharpkernel 删除成功:(刷 ...

  6. 洛谷P4319 变化的道路

    题意:给定图,每条边都有一段存在时间.求每段时间的最小生成树. 解:动态MST什么毒瘤...洛谷上还是蓝题... 线段树分治 + lct维护最小生成树. 对时间开线段树,每条边的存在时间在上面会对应到 ...

  7. [luogu1503][鬼子进村]

    题目链接 思路 将哪些村庄已经被摧毁了放到treap里.查询的时候如果当前村庄已经被毁了,那么就可以直接输出0.不然就输出这个村庄的后继-前驱-1.原因显然 代码 #include<cstdio ...

  8. JMeter请求执行次数 你想执行几次就执行几次

    今天介绍下JMeter如何控制请求执行次数 主要有两种方式: 方式一:通过循环控制器控制每个请求的执行次数 例如:脚本执行规律是这样的,login-->customerPage-->sea ...

  9. matlab图片 latex显示

    matlab图片另存为bmp格式,用在线网站转换格式为png. 莫要直接另存为jpg格式,在latex中显示,否则图片显示的质量不高.

  10. ES6学习：Map结构的目的和基本用法

    Map结构的目的和基本用法 JavaScript的对象(Object)本质上是键值对的集合(Hash结构),但是只能用字符串作为键.这给它的使用带来了很大的限制.   1 2 3 4 5 6 7 8 ...