前端在做 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. Hdoj 1102.Constructing Roads 题解

    Problem Description There are N villages, which are numbered from 1 to N, and you should build some ...

  2. 【LOJ#6060】Set（线性基）

    [LOJ#6060]Set(线性基) 题面 LOJ 题解 好题啊QwQ. 首先\(x1\oplus x2=s\)是定值.而\(s\)中假设某一位上是\(1\),则\(x1,x2\)上必定有一个是\(1 ...

  3. 关于windows下NODE_ENV=test无效的情况解决办法

    redux的单元测试命令为 NODE_ENV=test mocha --recursive --compilers js:babel-core/register --require ./test/se ...

  4. HEOI2013 Segment

    传说中的“李超树”. 大意:给你若干线段,试求横坐标x上的最上方一条线段的编号.无则输出零. 解:用线段树维护. 插入的时候保存自己这个区间上可能成为最大值的线段,被抛弃的则看情况下放. 查询时从最底 ...

  5. [luogu4309][最长上升子序列]

    题目链接 思路 因为这些数字是从小到大加进去的,所以以当前数字结尾的最长上升子序列可以从前面位置的任何一个数字转移过来.所以只要能知道每个数字最终位于哪个位置就行了. 没想到出了treap还有什么办法 ...

  6. 在vue中使用import()来代替require.ensure()实现代码打包分离

    最近看到一种router的写法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const login = ...

  7. Day013--Python--内置函数一

    一.作用域相关(2) 1. globals()  查看全局空间作用域中的内容. 函数会以字典的类型返回全部全局变量. 2. locals()  查看当前空间作用域中的内容. 函数以字典的类型返回当前位 ...

  8. 委托delegate

    委托delegate没有函数体.委托可以指向函数(要与指向的函数格式.类型相一致) namespace demo { public delegate double MyDelegate(double ...

  9. (计算几何基础 叉积) nyoj68-三点顺序

    68-三点顺序 内存限制:64MB 时间限制:1000ms 特判: No通过数:27 提交数:43 难度:3 题目描述: 现在给你不共线的三个点A,B,C的坐标,它们一定能组成一个三角形,现在让你判断 ...

  10. php项目核心业务（增、删、改、查）（第三篇）

    对增删改查数据库的封装 //php对数据库的封装 //Mysql_fetach($sql)函数查询所有的 function Mysql_fetach($sql){ $conn=mysqli_conne ...