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 相关文章推荐
jquery text()要注意啦
Oct 30 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
vue excel上传预览和table内容下载到excel文件中
Dec 10 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
用PHP读取IMAP邮件
2006/10/09 PHP
基于mysql的论坛(6)
2006/10/09 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
原生JS轮播图插件
2017/02/09 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
Python如何批量生成和调用变量
2020/11/21 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
技术总监管理职责范本
2014/03/06 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server