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 浏览器检测代码精简版
Mar 04 Javascript
javascript操作数组详解
Dec 17 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
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读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
python自动生成model文件过程详解
2019/11/02 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
求职简历自荐信
2013/10/20 职场文书
采购部岗位职责
2013/11/24 职场文书
目标责任书范文
2014/04/14 职场文书
技术入股合作协议书
2014/10/07 职场文书
个人学习总结范文
2015/02/15 职场文书
农村老人去世追悼词
2015/06/23 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
mysql自增长id用完了该怎么办
2022/02/12 MySQL
Python Numpy库的超详细教程
2022/04/06 Python
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS