javascript触发input-file的click事件
概述
- input:file本身自带的样式不太好看,但是又没法设置样式。
- 由于系统限制,不能通过代码触发,只允许用户自主点击。
- 通常的解决办法是,把input:file透明化,实际上点击的还是input:file。
方案
- 虽然可以通过概述中的办法用css实现,但始终还是占据了位置。
- 以下的通过javascript实现的触发事件,简单的一行代码即可搞定:D
<body>
<input type="file" id="demo">
<hr> <h5 onclick="document.querySelector('#demo').click()")>虽然我不是按钮,不过你点我的话,是可以触发上传的哦,
<br>
p.s:即使input:file隐藏了也能。</h5>
</body>
javascript触发input-file的click事件的更多相关文章
- 【JS】 伪主动触发input:file的click事件
大家用到input:file标签时,对于input:file的样式难看的处理方法一般有2种: 采用透明化input:file标签的方法,上面放的input:file标签,下面放的是其他标签,实际点击的 ...
- 伪触发 input file 的click事件
前端在做 input file 美化的时候,通常 把 input 定位position 到 已美化的按钮最上方 opacity: 0 HTML5时代,已有更方便的方法,点击美化按钮直接触发选择文件事件 ...
- 如何用按钮的click事件去触发a标签的click事件
在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...
- JQuery的click,trigger触发a标签的click事件无效的问题分析
今天在做一个手机端webAPP链接下载的时候,给a标签一个下载链接,但是通过 <a id="downFile" download="" href=&quo ...
- 给js创建的一个input数组绑定click事件
<html> <body> <input type="button" name="input[]" value="按钮1 ...
- 使用jquery trigger 触发a标签的click事件取代window.open方法
var ohtml='<div class="friend-dialog tac pt15 pb20">'+ '<div class="f-h32&qu ...
- 移动端触发touchend后阻止click事件
// vue里面简单的处理方式,可以同时兼容PC和移动端 <div @touchend.stop.prevent="doSomething" @click.stop.prev ...
- 关于IOS浏览器:document,body的click事件触发规则
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- click事件触发也有失灵的时候?
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- bootstrap 3 中表单元素的写法 ---- 重点是 input file 元素的
我们知道file元素,因为有许多的插件可以使用,往往我们不需要写样式,但是如果要求我们自己写样式(利用bootstrap 3)实现一个file极简样式如何写呢? 下面我们先来看看整个表单的样子! 重点 ...
随机推荐
- Android 介绍spydroid每个包的大体功能
看了接近一周的spydroid源代码,对spydroid这个开源项目有了一定的认识.也许有些理解不一定正确,给后来者一点启示.也是自己对rtsp协议,rtp协议的总结. 在windows下,如果安装了 ...
- linux wenjian
文件锁是一种文件读写机制,在任何特定的时间只允许一个进程访问一个文件.利用这种机制能够使读写单个文件的过程变得更安全. 在这篇文章中,我们将探讨Linux中不同类型的文件锁,并通过示例程序来理解它们之 ...
- Letter Combinations of a Phone Number——LeetCode
Given a digit string, return all possible letter combinations that the number could represent. A map ...
- 关于jsp中超链接的相对路径
前提:新建了一个名为MyProject的web工程.在WebContent目录下新建一个jsp目录,在jsp目录中新建一个index.jsp文件. 实验:在index.jsp里写了4个链接,如下: & ...
- windows快捷键和命令
以管理员方式打开命令行界面:win+X+A 打开服务界面:services.msc 删掉windows系统记住的WIFI密码 cmd下面运行 显示存储的无线连接netsh wlan show prof ...
- 用js实现的刷新页面
一.先来看一个简单的例子: 下面以三个页面分别命名为frame.html.top.html.bottom.html为例来具体说明如何做. frame.html 由上(top.html)下(bottom ...
- monkeyrunner 详细介绍
MonkeyRunner: monkeyrunner工具提供了一个API,使用此API写出的程序可以在Android代码之外控制Android设备和模拟器.通过monkeyrunner,您可以写出一个 ...
- HDFS集群balance(2)-- 架构概览
转载请注明博客地址:http://blog.csdn.net/suileisl HDFS集群balance,对应版本balance design 6 如需word版本,请QQ522173163联系索要 ...
- 支持向量机通俗导论(理解SVM的三层境地)
支持向量机通俗导论(理解SVM的三层境地) 作者:July :致谢:pluskid.白石.JerryLead.出处:结构之法算法之道blog. 前言 动笔写这个支持向量机(support vector ...
- Linux下查看所有用户(shell脚本获取)
在Linux系统中,使用者账号管理最重要的两个文件是/etc/password和/etc/shadow.在/etc/password文件中,每一行都代表一个账号,但是有很多账号是系统账号.比如:b ...