前端在做 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. 【LOJ#2542】[PKUWC2018]随机游走（min-max容斥，动态规划）

    [LOJ#2542][PKUWC2018]随机游走(min-max容斥,动态规划) 题面 LOJ 题解 很明显,要求的东西可以很容易的进行\(min-max\)容斥,那么转为求集合的\(min\). ...

  2. C# 新语法收集

    内联变量 使用int.tryparst时,先要申明变量,用于out参数 int d; int.tryparse(s,out d); 使用内联变量写法可以如下.功能一样简化了写化 int.trypars ...

  3. Python3 与 C# 扩展之～基础拓展

      上次知识回顾:https://www.cnblogs.com/dotnetcrazy/p/9278573.html 代码裤子:https://github.com/lotapp/BaseCode ...

  4. Flask filter过滤器

    简单的数据集体添加样式输出用管道过滤,除了flask模块以外不需要导其他的包 <head> <meta charset="UTF-8"> <meta ...

  5. PMP项目管理考试培训机构内部资料打包赠送（3个PPT）

    PMP认证考试我自己这边是今年6月份考过了的,手里觉得对自己有帮助的资料就是这3个PPT,讲解的比较清晰,知识点详细.结合自己做的笔记,备考十分轻松.所以推荐大家也看一下. 有需要的可以联系. PPT ...

  6. ElasticSearch6.3.2------入门

    先去官网下载,方便测试用的Windows版本的 都解压了 --- 启动ElasticSearch和Kibana [E:\elasticsearch-]$ .\bin\elasticsearch.bat ...

  7. HDU - 5952 Counting Cliques(DFS)

    A clique is a complete graph, in which there is an edge between every pair of the vertices. Given a ...

  8. POJ 2112 Optimal Milking （Dinic + Floyd + 二分）

    Optimal Milking Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 19456   Accepted: 6947 ...

  9. 字节缓冲流 BufferedOutputStream BufferedInputStream

    /*缓冲流:读取数据大量的文件时,读取的速度慢java提供了一套缓冲流 提高io流的效率 * */ package cn.lijun.demo; import java.io.BufferedInpu ...

  10. WCF博文链接

    我的基于WCF的SOA架构项目实战 http://www.uml.org.cn/soa/201112201.asp WCF实战(一):创建服务器类 https://blog.csdn.net/qium ...