input标签的accept属性、JQuery绑定keyDown事件
一. input标签的accept属性
当我们上传文件或者注册上传头像时,我们可以一般都是使用:
<input type="file" id="my_file">
但是这样的话,所有文件都会显示出来,这里以上传头像为例,一点击选择文件,所有跟图片无关的文件也会显示出来:

这时可以给input标签增加一个accept属性,让它只显示图片相关的文件:
<input type="file" id="my_file" accept="image/*" >
现在再来看看效果:

二. JQuery绑定keyDown事件
一般登录时,输完之后点击回车即可登录,这是绑定了事件,我们可以用标签选择器来给所有input标签绑定keyDown事件。
首先提一下window.event事件,event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 event事件属性:
altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY,
propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y
详情点击--》》API文档。
$('input').keydown(function () {
let e = window.event||arguments[0];
#回车键ascii码为13
if (e.keyCode == 13){
alert('你按下回车了!!!')
});
实际上event事件还有一个event.which事件对象,针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键。官方推荐用 event.which 来监视键盘输入。更多细节请参阅: event.charCode on the MDC.
用event.which时只需将e.keyCode改为e.which即可:
$('input').keydown(function () {
let e = window.event||arguments[0];
#回车键ascii码为13
if (e.which == 13){
alert('你按下回车了!!!')
});
键盘事件:https://www.jquery123.com/keydown/
小例子,给body绑定按键事件,按下Backspace键返回上一级页面:
$('body').keydown(function () {
let e = window.event||arguments[0];
if(e.keyCode==8){
history.back();
}
});
input标签的accept属性、JQuery绑定keyDown事件的更多相关文章
- HTML <input> 标签的 accept 属性
<form> <input type="file" name="pic" id="pic" accept="im ...
- HTML <input> 标签的 type 属性
HTML <input> 标签的 type 属性 HTML <input> 标签 实例 下面的表单拥有两个输入字段以及一个提交按钮: <form action=" ...
- input标签的hidden属性,四大常用JSTL标签库
input标签的hidden属性的应用及作用 定义:传输关于客户端/服务器交互的状态信息. Transmits state information about client/server intera ...
- jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件
jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...
- 查看jquery绑定的事件函数
作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到 ...
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- jQuery动态添加li标签并添加属性和绑定事件
代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...
- HTML input标签的checked属性与Razor解析
在HTML中,input标签可以通过type属性设置为checkbox.同时,也就包含了一个checked属性.对于这个checked属性,有一个特别的地方就是,它可以不需要属性值就可以表示是否选择了 ...
- <input type="file"> accept属性筛选文件类型
如果你不希望用户上传任何类型的文件, 你可以使用 input 的 accept 属性. 设置支持 .doc / .docx / .xls / .xlsx / .pdf 格式: <input ty ...
随机推荐
- TICA 2019 自动的自动化测试——智能化一站式的API测试服务
阿里QA导读:新奥集团中台的陈磊为我们打开了AI测试驱动的视野,同时也深入浅出地介绍了如何打造智能化API测试框架.通过陈磊老师的分享,我们看到了AI-DT的无限可能性.以后,AI能不能代替大部分手动 ...
- APP内计费规范出台 手游乱收费现象能被遏制?
手游乱收费现象能被遏制?" title="APP内计费规范出台 手游乱收费现象能被遏制?"> 在一个混乱.无秩序的环境中竞争,虽然有可能不择手段地获取更多的利益,但 ...
- classnames
在React中编写模板时给标签添加class. 如果是固定的className="XX"就可以了. 如果要根据状态值动态应用或去除, 或使用多个class时就麻烦了. 可以使用cl ...
- mac电脑终端使用scp上传/下载文件/文件夹
1.从服务器下载文件到本地电脑 1 scp -r remote_username@remote_ip:remote_folder local_folder 例如: 1 scp -r root@106. ...
- figure设置坐标轴
import matplotlib.pyplot as plt import numpy as np x=np.linspace(-3,3,50) y1=x*2+1 y2=x**2 plt.plot( ...
- Nginx+PHP配置错误,日志:[error] 24324#0: *31 FastCGI sent in stderr: "Primary script unknown" while reading response header from upstream
一.问题现象 1.安装nginx.php.php-fpm后,浏览器访问php报错,“File not found”: 二.问题排查 1.检查nginx.php-fpm服务是否正常启动,均正常启动: 2 ...
- HDU 5894 hannnnah_j’s Biological Test【组合数学】
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5894 题意: 一个圆桌上有$n$个不同的位置,$m$个相同的人安排到这$n$个位置上,要求两人相邻的 ...
- Azure Devops/TFS测试管理(下)
紧接着 上篇 经过上篇折腾,我们已经有了: ①手工测试的流程规范 ②测试用例的管理 对于开发出身的我,我觉得一个项目上线流程应该主要瓶颈只能是开发本身,因为我认为最复杂过程应该就是开发,而肯定不能是测 ...
- 前后端分离下的跨域CAS请求
最重要的两点: ajax请求跨域的时候,默认不会携带cookie. 请求分为普通请求(HttpRequest)和Ajax请求(XMLHttpRequest) 先屡一下跨域CAS认证的流程: 前端发起a ...
- FCC 成都社区·前端周刊 第 7 期
01. ES2016, 2017, 2018 中的新特性 文章介绍了 18 个 ECMAScript 2016,2017 和 2018 中新增加的特性,这些特性已被加入到 TC39 提案中.包括Arr ...