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


Posted in Javascript onNovember 04, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<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程序设计有所帮助。

Javascript 相关文章推荐
Javascript打印网页部分内容的脚本
Nov 17 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
关于微信小程序bug记录与解决方法
Aug 15 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 #Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 #Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 #Javascript
JavaScript前端开发之实现二进制读写操作
Nov 04 #Javascript
js实现二级菜单渐隐显示
Nov 03 #Javascript
整理JavaScript创建对象的八种方法
Nov 03 #Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 #Javascript
You might like
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
brook javascript框架介绍
2011/10/10 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
Python安装OpenCV的示例代码
2020/03/05 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
python3将变量输入的简单实例
2020/08/19 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
2013年学期结束动员演讲稿
2014/01/07 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
高中语文课后反思
2014/04/27 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
甜品店创业计划书
2014/09/21 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
java解析XML详解
2021/07/09 Java/Android
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技