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,jquery闭包概念分析
Jun 19 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
移动端效果之IndexList详解
Oct 20 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
浅谈开发eslint规则
Oct 01 Javascript
Vue触发式全局组件构建的方法
Nov 28 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
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
微信小程序引入Vant组件库过程解析
2019/08/06 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
Python常用的日期时间处理方法示例
2015/02/08 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
使用numba对Python运算加速的方法
2018/10/15 Python
python实现两张图片的像素融合
2019/02/23 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
大学生毕业自我评价范文分享
2013/11/07 职场文书
市场营销管理制度
2014/01/29 职场文书
文案策划求职信
2014/03/18 职场文书
标准单位租车协议书
2014/09/23 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
初中班主任教育随笔
2015/08/15 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
Nginx反向代理学习实例教程
2021/10/24 Servers
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电