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 相关文章推荐
js 创建书签小工具之理论
Feb 25 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
php代码书写习惯优化小结
2013/06/20 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
node.js中的fs.chownSync方法使用说明
2014/12/16 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
layui表单提交到后台自动封装到实体类的方法
2019/09/12 Javascript
python查看FTP是否能连接成功的方法
2015/07/30 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
团组织关系介绍信
2014/01/12 职场文书
岗位聘任书范文
2014/03/29 职场文书
房地产活动策划方案
2014/05/14 职场文书
小学教师师德承诺书
2014/05/23 职场文书
财政局个人年终总结
2015/03/03 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
MySQL学习之基础命令实操总结
2022/03/19 MySQL