利用Keydown事件阻止用户输入实现代码

先了解下各事件的区别

KeyDown：在控件有焦点的情况下按下键时发生
KeyPress：在控件有焦点的情况下按下键时发生
KeyUp： 在控件有焦点的情况下释放键时发生

1、KeyPress主要用来接收字母、数字等ANSI字符。KeyDown 和 KeyUP 事件过程通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键

2、KeyPress 只能捕获单个字符，KeyDown 和KeyUp 可以捕获组合键。

3、KeyPress 不显示键盘的物理状态（SHIFT键），而只是传递一个字符。KeyPress 将每个字符的大、小写形式作为不同的键代码解释，即作为两种不同的字符。KeyDown 和KeyUp 不能判断键值字母的大小。KeyDown 和 KeyUp 用两种参数解释每个字符的大写形式和小写形式：keycode — 显示物理的键（将 A 和 a 作为同一个键返回）和 shift —指示 shift + key 键的状态而且返回 A 或 a 其中之一。

5、KeyPress 不区分小键盘和主键盘的数字字符，KeyDown 和KeyUp 区分小键盘和主键盘的数字字符。

6、KeyDown、KeyUp事件是当按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的。由于一般按下键盘的键往往会立即放开（这和鼠标不同），所以这两个事件使用哪个差别不大。而且，up和其他两者还有一个区别：要判断key修改后的状态必须用up。

我们可以利用keydown事件来阻止用户的输入，比如某输入域只能输入数字

键盘上数字键的keyCode

[48-57] 数字键
[96-105] 数字小键盘
此外允许Backspace键删除

代码如下


代码如下:

var input = document.getElementById('number_ipt')
input.onkeydown = function(e) {
var keyCode = e.keyCode
if ( !isNumber(keyCode) ) return false
}

// 仅能输入数字
function isNumber(keyCode) {
// 数字
if (keyCode >= 48 && keyCode <= 57 ) return true
// 小数字键盘
if (keyCode >= 96 && keyCode <= 105) return true
// Backspace键
if (keyCode == 8) return true
return false
}

赞 (0)

相关推荐

  • 利用Keydown事件阻止用户输入实现代码

    先了解下各事件的区别 KeyDown:在控件有焦点的情况下按下键时发生 KeyPress:在控件有焦点的情况下按下键时发生 KeyUp: 在控件有焦点的情况下释放键时发生 1.KeyPress主要用来接收字母.数字等ANSI字符.KeyDown 和 KeyUP 事件过程通常可以捕获键盘除了PrScrn所有按键(这里不讨论特殊键盘的特殊键 2.KeyPress 只能捕获单个字符,KeyDown 和KeyUp 可以捕获组合键. 3.KeyPress 不显示键盘的物理状态(SHIFT键),而只是传递一

  • Ajax 验证用户输入的验证码是否与随机生成的一致

    后台Java代码[验证码生成] /** * 随机生成6位随机验证码 */ public static String createRandomVcode(){ //验证码 String vcode = ""; for (int i = 0; i < 6; i++) { vcode = vcode + (int)(Math.random() * 9); } return vcode; } 后台Java代码[使用验证码并将验证码保存到session里面] String authCode

  • JS仿淘宝搜索框用户输入事件的实现

    JS仿淘宝搜索框用户输入事件的实现

    淘宝是我们经常用的一个网上购物平台,打开淘宝网首页,找到淘宝首页的搜索框,如下如所示: 大家可以看到,当页面一打开,搜索框中就可以看到灰色字体"少女高跟鞋",还有闪烁的光标.当用户点击输入的时候,灰色字消失.当用户清空文本框的所有内容的时候,灰色字自动恢复. 接下来,这个小案例就是要介绍如何实现这种效果,即用户输入事件. 判断用户输入的事件有 oninput 和onpropertychange .当然,想必你能想到,由于浏览器兼容的问题,他们出现的场合有所不同. 正常浏览器支持onin

  • Js 冒泡事件阻止实现代码

    1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性.通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素).而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码: 复制代码 代码如下: $(document).ready(function(

  • Django 如何使用日期时间选择器规范用户的时间输入示例代码详解

    如果你的模型中含有 datetime 类型的字段,表单中需要用户输入日期和时间,那么你如何保证不同用户输入的时间都遵循一定的格式 (DD/MM/YYYY 或者 YYYY-MM-DD) 是个必须要考虑的问题.一个更好的方式是在前端使用日期时间选择器 DateTimePicker,以日历的形式统一选择输入时间,如下图所示.小编今天将尝试以最少的代码教你实现如何在 Django 项目中实现日期时间选择器 DateTimePicker. 示范模型 假如我们有如下一个 Article 模型,含有 pub_

  • 对用户输入的判断的shell实现代码

    今天的案例是将 对用户输入的判断的 #!/bin/sh # validint -- Validates integer input, allowing negative ints too. function validint { # Validate first field. Then test against min value $2 and/or # max value $3 if they are supplied. If they are not supplied, skip these

  • 利用JavaScript模拟京东按键输入功能

    在看到这个功能的时候我也很惊讶,京东竟然做了这样的一个功能.在京东商城网页版,无论你在什么位置,只需要按下S键,就可以将光标定位到搜索栏进行搜索.虽然说这是一个很不错的功能,但是貌似没有几个人知道. 程序实现很简单,在s键上升的时候搜索框获得焦点就可以了. <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name=&q

  • JS+PHP实现用户输入数字后显示最大的值及所在位置

    JS+PHP实现用户输入数字后显示最大的值及所在位置

    本文主要给大家介绍的是关于JS+PHP实现用户输入数字后显示最大的值及所在位置的相关内容,目的:分清JS PHP的区别,拓宽思维,下面来一起看看详细的介绍: 分析 1.利用JS的prompt输入用户想要输入的值. 2.利用HTML表单的text标签将输入的值传递给PHP处理文件 3.PHP进行数值判定,选出最大值和位置. 由浅入深: 1.在JS实现获取数组的最大值. var a=[10,20,40,30]; // var max=0; var max=a[0]; for(var i=0;i<a.

  • PHP开发不能违背的安全规则 过滤用户输入

    作为最基本的防范你需要注意你的外部提交,做好第一面安全机制处理防火墙. 规则 1:绝不要信任外部数据或输入 关于Web应用程序安全性,必须认识到的第一件事是不应该信任外部数据.外部数据(outside data) 包括不是由程序员在PHP代码中直接输入的任何数据.在采取措施确保安全之前,来自任何其他来源(比如 GET 变量.表单 POST.数据库.配置文件.会话变量或 cookie)的任何数据都是不可信任的. 例如,下面的数据元素可以被认为是安全的,因为它们是在PHP中设置的. 复制代码 代码如

  • 添加超级用户的.asp代码[蓝屏的原创,凯文改进,Ms未公布的漏洞]

    添加超级用户的.asp代码[蓝屏的原创,凯文改进,Ms未公布的漏洞] 作者:蓝屏,凯文 文章来源:冰点极限其实上个礼拜我和凯文就在我的肉鸡上测试了,还有河马史诗.结果是在user权限下成功添加Administrators组的用户了(虽然我不敢相信我的眼睛). 上次凯文不发话,我不敢发布啊....现在在他的blog 上看到他发布了,就转来了咯(比我上次测试时还改进了一点,加了个表单).这下大家有福咯``` 反正代码是对的,但是很少能成功,具体的看运气了..呵呵,下一步我想把他整合到海洋里面去.嘿嘿

随机推荐