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监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
深入理解Vue keep-alive及实践总结
Aug 21 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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数字转汉字代码(算法)
2011/10/08 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
大学生个人推荐信范文
2013/11/25 职场文书
土建资料员岗位职责
2014/01/04 职场文书
前处理班长职位说明书
2014/03/01 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
2015年安全月活动总结
2015/03/26 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫