前端在做 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. Android 程序优化总结

    第一部分 编程规范 1.1 基本要求: 程序结构清晰,简单易懂,单个函数的程序行数不得超过100行. 打算干什么,要简单,直接. 尽量使用标准库函数和公共函数 不要随意定义全局变量,尽量使用局部变量. ...

  2. Luogu P5316 【恋恋的数学题】

    是个神仙题 就三种情况,分类讨论. \(k=2\): 因为保证有解,所以直接输出即可. \(k=3\): 由于对应情况可以枚举全排列寻找,所以在此只考虑顺序对应时的情况,不妨设六个数分别为\(g_{a ...

  3. ⌈洛谷4735⌋⌈BZOJ3261⌋最大异或和【可持久化01Trie】

    题目链接 [BZOJ传送门] [洛谷传送门] 题解 终于学会了可持久化trie树了.感觉并不是特别的难. 因为可持久化,那么我们就考虑动态开点的trie树. 都知道异或操作是有传递性的,那么我们就维护 ...

  4. Mac上连接nifi

      1.  open terminal 2.  ssh root@nifi.webus.cn 3. logs cd /var/lib/nifi/logs   4. view log tail -100 ...

  5. BUG关闭原因

    已解决:缺陷已经修复. 重复缺陷:是指在系统里相同原因的缺陷已经被其他人报告.在此缺陷被作为重复缺陷返回时,先不要立即取消.必须等到核查修复后,才在系统里取消.这是因为有些缺陷被误认为是重复缺陷,实际 ...

  6. Docker使用阿里云docker镜像加速

    首先进入阿里云docker库首页 https://dev.aliyun.com/ 点击 管理中心 点击 加速器 复制下面的加速地址 进入docker的 Settings 把basic 切换成 adva ...

  7. [2017-8-02]Android Learning Day8

    自定义动画效果 新建一个customAnim类 package com.liwenchi.myapplication; import android.view.animation.Animation; ...

  8. 清理XFCE4卸载残留

    apt-get remove xfce4 apt-get remove xfce4* apt-get autoremove apt-get autoclean apt-get clean --- 更新 ...

  9. luogu1397 [NOI2013]矩阵游戏 (等比数列求和)

    一个比较显然的等比数列求和,但有一点问题就是n和m巨大.. 考虑到他们是在幂次上出现,所以可以模上P-1(费马小定理) 但是a或c等于1的时候,不能用等比数列求和公式,这时候就要乘n和m,又要变成模P ...

  10. 【UNR #1】火车管理

    题目描述 uoj 旗下有一个火车站,用来管理属于 uoj 的小火车. 火车站一共有 nn 条编号为 1,…,n1,…,n 的,只有一端的用来存放小火车的铁路,由于小火车特殊的构造,每条铁路可以停放无数 ...