JS实现获取键盘按下的按键并显示在页面上的方法

本文实例讲述了JS实现获取键盘按下的按键并显示在页面上的方法。分享给大家供大家参考，具体如下：

请你使用键盘输入一些字符，这些字符就被显示在网页的空白处，是不是少了文本框或文本域之类的东西，觉得挺不习惯呢？这个效果是应用了JavaScript中的document.onkeypress对象，监测键盘的一举一动，并记录下哪些键被按下，有意思吧，想研究Js的朋友，就从这些小例子开始吧。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-web-show-key-press-codes/

具体代码如下：

<html>
<head>
<title>将按下的按键显示在页面上</title>
<script language="javascript">
<!--
 str = "";
 function showkey(){
  asc = event.keyCode;
  key = String.fromCharCode(asc);
  str += key;
  txt.innerHTML = str;
 }
 document.onkeypress=showkey;
-->
</script>
</head>
<body>
请使用键盘输入文字：
<div id="txt"></div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • js在输入框屏蔽按键,只能键入数字的示例代码

    复制代码 代码如下: <script language="javascript">function GetInput(){//屏蔽非数字和非退格符    var k = event.keyCode;   //48-57是大键盘的数字键,96-105是小键盘的数字键,8是退格符←    if ((k <= 57 && k >= 48) || (k <= 105 && k >= 96) || (k== 8)){     r

  • JavaScript 监听textarea中按键事件

    有个textarea, Java代码 复制代码 代码如下: <textarea id="text"></textarea> 经常会定义onKeyPress="keypress();",并定义以下方法. 复制代码 代码如下: var keypress = function(e){ var e = e || window.event; var k = e.keyCode; } 这里我使用的办法是JQuery. 复制代码 代码如下: $("

  • Javascript 检测键盘按键信息及键码值对应介绍

    Javascript中有3个事件句柄在对应键盘的输入状态:keydown.keypress和keyup. 分别对应的意思是:按键被按下(按下按键但还没有抬起).点击按键(按下并抬起按键).按键抬起(按键抬起之后) 按键的分类 按键可以分为"实键"和"虚键" 实键可以理解为我们能够看到并打印出来的按键,如字母"A".数字"1".字符"?"等等 虚键就是那些无法打印出来起到控制作用的按键,如"Ctrl

  • JS获取键盘上任意按键的值(实例代码)

    废话不多说,直接上代码 复制代码 代码如下: function keyUp(){         if(navigator.appName == "Microsoft Internet Explorer"){        var keycode = event.keyCode;                }else{         varkeycode = keyUp.caller.arguments[0].which;            }       alert(key

  • JS判断是否长按某一键的方法

    本文实例讲述了JS判断是否长按某一键的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> var lastkeyCode = -1; function TestKeyDown(event) { if (event.keyCo

  • 按键盘方向键翻页跳转的javascript代码(支持ie,firefox)

    网上提供的代码,多是仅支持ie,下面这个是我们特别为大家整理的兼容firefox版本的. 支持按键盘方向键翻页跳转的代码支持ie,firefox document.onkeydown = pageEvent; var prevpage="http://www.jb51.net/softs"; var nextpage="http://www.jb51.net/codes"; function pageEvent(evt){ evt = evt ||window.ev

  • JavaScript onkeydown事件入门实例(键盘某个按键被按下)

    JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键),onkeypress 事件只响应字符键按下后的处理. 提示 Internet Explorer/Chrome 浏览器使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox/Opera 等浏览器使用 event.which. onkeydown 获取用户按下的键

  • js获取及判断键盘按键的方法

    本文实例讲述了js获取及判断键盘按键的方法.分享给大家供大家参考,具体如下: js 里面的键盘事件经常用到,所以收集了键盘事件对应的键码来分享下: keyCode 8 = BackSpace BackSpace keyCode 9 = Tab Tab keyCode 12 = Clear keyCode 13 = Enter keyCode 16 = Shift_L keyCode 17 = Control_L keyCode 18 = Alt_L keyCode 19 = Pause keyC

  • JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)

    JavaScript onkeypress 事件 用户按下或按住一个键盘按键时会触发 onkeypress 事件. 注意:onkeypress 事件与 onkeydown事件有些细微差别,onkeypress 事件不做相应功能键按下的处理.具体可将下面的示例更改为 onkeydown 事件后,可输入 !@#$ 等特殊字符即可体会出二者之间的差别. 提示 Internet Explorer/Chrome 浏览器使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox

  • js获取键盘按键响应事件(兼容各浏览器)

    复制代码 代码如下: <script type="text/javascript" language=JavaScript charset="UTF-8">document.onkeydown=function(event){var e = event || window.event || arguments.callee.caller.arguments[0];if(e && e.keyCode==27){ // 按 Esc //要做的

  • js中各浏览器中鼠标按键值的差异

    js中各浏览器中鼠标按键值的差异

    W3C DOM-Level-2 定义如下 W3C DOM 写道 During mouse events caused by the depression or release of a mouse button, button is used to indicate which mouse button changed state. The values for button range from zero to indicate the left button of the mouse, on

随机推荐