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();
        }
    });

原文地址:https://www.cnblogs.com/maoruqiang/p/11082155.html

时间: 2024-10-25 02:32:01

input标签的accept属性、JQuery绑定keyDown事件的相关文章

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

input标签的hidden属性的应用及作用 定义:传输关于客户端/服务器交互的状态信息. Transmits state information about client/server interaction. 解释: 此元素在页面中不显示,在提交表单时发送 value 属性的值. ——隐藏域,在页面上不显示,但是可以将参数传递给下一页,也可以被本页的javascript函数获取. 隐含域主要用于提交表单的时候传递动态参数. 四个常用标签库: <c:set  <c:if   <c:fo

js 控制 input标签的 readonly属性

input 标签的 readonly 属性   $('#id').attr("readonly","readonly")//将input元素设置为readonly   $('#id').removeAttr("readonly");//去除input元素的readonly属性     if($('#id').attr("readonly")==true)//判断input元素是否已经设置了readonly属性 本人喜欢如下方法

html中input标签相关的属性

1. input标签的type属性 属性 值 描述 type button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本). file 定义输入字段和 "浏览"按钮,供文件上传. checkbox 定义复选框. hidden 定义隐藏的输入字段. image 定义图像形式的提交按钮. password 定义密码字段.该字段中的字符被掩码. radio 定义单选按钮. reset 定义重置按钮.重置按钮会清除表单中的所有数据. submit 定义提交按钮.提交按钮

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

jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQuery是目前使用最广泛的javascript函数库.据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. jQuery的版本分为1.x系列和2.x.3.x系列,1.x系列兼容低版本的浏览器,2.x.3.x系列放弃支持低版本浏览器

jQuery绑定enter事件

有时我们写jQuery绑定按钮事件时,执行成功后却发现,习惯性地按下"Enter"键不能提交?是不是我们要重新将"绑定按钮事件"再写一遍成"绑定enter键盘事件"呢?No!No!No! 只需要将键盘事件绑定按钮即可,就是这样简单--,绑定按键后就会执行相应的"绑定按键事件"了.     $(function(){         $("#button").bind("click",fu

js小技巧: 给div绑定keydown事件

要想给一个元素绑定keydown事件我们经常这样: $('#some_thing').keydown(function(event){ ...... }) 但是当你尝试给div元素绑定时会发现不起作用, 解决办法是给这个div添加一个tabindex的属性: $('#some_div').attr('tabindex', 1).keydown(function(event){ ...... }) js小技巧: 给div绑定keydown事件

jquery绑定的事件对ajax刷新出的数据不生效,on可能受jquery版本影响

问题:jquery绑定的事件对ajax刷新出的数据不生效 方法:可以用 jquery 里面的 on 和  delegate 预绑定父元素就可以触发的. 注意:某些限制下,个人用的是jquery 1.4.2版本,还不能更新到 1.7版本,on 绑定是报错的,用 delegate 可以的. on对jquery 看网上资料是需要 1.7以后版本才支持,具体没试验. 案例: 搜索新数据,调用choic.php 将key传过去获取搜索内容返回到arcz里面.将 arcz 里面新刷新出来的选中的 复选框 一

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

javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbind('click').click(function(){ //此处填写逻辑代码 }) ------ 因为利用js在页面加载后添加需要点击事件的代码,发现在点击后会代码会执行两次,因为有toggle效果,导致弹窗出现又很快丢失 查了一些资料,发现这是冒泡的原因,需要在点击事件代码中加入阻止冒泡的方法: e.s

针对jquery绑定click事件执行两次,layer弹出框,以及img的map属性应用。

前不久使用jQuery与layer实现一个弹出框,发现在绑定弹出框事件时,事件执行了两次,准确的说是方法同时注册了两次,不分先后执行了两遍,导致弹出框弹出两次.请教同事后,发现原因有可能是jQuery的js与layer的js冲突(具体原因还需要深入了解),通过网络和请教同事,得到了三种处理方法. 方法一:不采用jQuery进行事件的绑定,直接在标签中添加onclick事件. 方法二:采用这种方式$("#item_add_button")[0].onclick = function(){