一. 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事件的更多相关文章

  1. HTML <input> 标签的 accept 属性

    <form> <input type="file" name="pic" id="pic" accept="im ...

  2. HTML <input> 标签的 type 属性

    HTML <input> 标签的 type 属性 HTML <input> 标签 实例 下面的表单拥有两个输入字段以及一个提交按钮: <form action=" ...

  3. input标签的hidden属性,四大常用JSTL标签库

    input标签的hidden属性的应用及作用 定义:传输关于客户端/服务器交互的状态信息. Transmits state information about client/server intera ...

  4. jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件

    jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...

  5. 查看jquery绑定的事件函数

    作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到 ...

  6. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  7. jQuery动态添加li标签并添加属性和绑定事件

    代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...

  8. HTML input标签的checked属性与Razor解析

    在HTML中,input标签可以通过type属性设置为checkbox.同时,也就包含了一个checked属性.对于这个checked属性,有一个特别的地方就是,它可以不需要属性值就可以表示是否选择了 ...

  9. <input type="file"> accept属性筛选文件类型

    如果你不希望用户上传任何类型的文件, 你可以使用 input 的 accept 属性. 设置支持 .doc / .docx / .xls / .xlsx / .pdf 格式: <input ty ...

随机推荐

  1. centos7开启ntp并同步时间到指定时区

    前提:近期公司都是使用的直接对外的云服务器,在登上服务器后用date命令查看新服务器的时间,发现并不是标准时间,于是需要做时间同步.我这里讲的是能连接外网的情况下,在服务器不多的情况下是否此方法,大型 ...

  2. 测试工程师不懂AI,还有未来吗?

    阿里妹导读:近几年人工智能.机器学习等词漫天遍地,似乎有一种无AI,无研发,无AI,无测试的感觉.有人说:不带上"智能"二字,都不好意思说自己是创新.我们先暂且不评论对错,只探讨这 ...

  3. 产品需求说明书PRD模版

    <软件自动化测试开发>出版了 XXX产品需求说明书 [版本号:V+数字]                 编  制: 日  期: 评  审: 日  期: 批  准: 日  期:       ...

  4. JNI 问题 wrong ELF class

    使用JNI发现一个问题, wrong ELF class: ELFCLASS64)主要是机器是64位的OS,默认编译的.so是64位 而java设置的默认是32位 JDK, 所以会出现这个问题.那么就 ...

  5. 5G时代,什么将会消失?

    ​​5G时代说着说着就来了,当然,它不可能一撮而就,但正如4G.移动互联网和WIFI这些东西基本上是日益精进的水平,现如今饭馆的生意是否火爆,不仅仅在于其菜品和服务的质量,更在于他们有没有WIFI以及 ...

  6. 20170220-coroutine

    协程 coroutine 最近频繁的听说到 "协程" 这个词,花了一段时间肤浅的研究了一下.对于 "它是一个什么东西" 有了一个大概的了解. from wiki ...

  7. C++走向远洋——43(人数不定的工资类,动态分配内存与释放)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  8. js操作复选框

    js操作复选框 JavaScript 代码: //复选框全选 $(function () { $("#select_all").click(function () { $(&quo ...

  9. nginx设置目录浏览及中文乱码问题解决

    在Nginx下默认是不允许列出整个目录的.如需此功能, 先打开nginx.conf文件,在location server 或 http段中加入 autoindex on;另外两个参数最好也加上去: a ...

  10. Apple App签名机制

    概览 数字签名 签名机制与验证过程 操作流程 数字签名 摘要算法 将任意长度文本通过一个算法得到一个固定长度的文本. 源文本不同,计算结果必然不同 无法从结果反推源 例如,MD5和SHA算法 非对称加 ...