前端在做 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. 自学Python4.8-生成器(方式二：生成器表达式)

    自学Python之路-Python基础+模块+面向对象自学Python之路-Python网络编程自学Python之路-Python并发编程+数据库+前端自学Python之路-django 自学Pyth ...

  2. 闲聊javascript继承和原型

    javascript继承已经是被说烂的话题了,我就随便聊一点~ 一.javascript的复制继承 javascript的继承有复制继承和原型继承,基于复制继承用的不太多,而且无法通过instance ...

  3. zxing二维码的生成与解码(C#)

    ZXing是一个开源Java类库用于解析多种格式的1D/2D条形码.目标是能够对QR编码.Data Matrix.UPC的1D条形码进行解码. 其提供了多种平台下的客户端包括:J2ME.J2SE和An ...

  4. react-native---rn中的修饰组件（TouchableHightlight、TouchableOpacity、TouchableNativeFeedback等）

    react-native中View组件这是单纯的视图容器,并不能响应交互变化,绑定事件,rn提供了TouchableOpacity等封装组件以正确响应触摸操作. TouchableWithoutFee ...

  5. MongoDB 学习记录（二）yum安装

    前言:接着上篇继续学习MongoDB,这次学习的是在Linux下安装MongoDB 环境:centos7.3 安装版本:MongoDB4.0 官网安装教程地址 https://docs.mongodb ...

  6. 第二篇-ubuntu18.04下怎么制作GIF动画

    一.在桌面打开终端 二.接着通过apt安装byzanz.sudo apt-get install byzanz 三.安装完成后在终端执行“xwininfo”.xwininfo 四.然后鼠标会变成“+” ...

  7. 2018.12.14 浪在ACM 集训队第九次测试赛

    浪在ACM 集训队第九次测试赛 B Battleship E Masha and two friends B 传送门 题意: 战船上有占地n*n的房间cells[][],只由当cells[i][j]= ...

  8. Luogu P4768 [NOI2018]归程

    题目链接 \(Click\) \(Here\) \(Kruskal\)重构树的好题.想到的话就很好写,想不到乱搞的难度反而相当高. 按照点的水位,建出来满足小根队性质的\(Kruskal\)重构树,这 ...

  9. mongodb的sql日志

    在Yii2中是没有打印出mongodb的sql语句,故借用下log来查看吧. 在网上有说可以使用$model->find()->createCommand()->getRawSql( ...

  10. 保存指定目录及其子目录的jpg文件

    import os txt_path = 't1.txt' f = open(txt_path, mode='a', encoding='utf-8') def all_path(dirname): ...