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 相关文章推荐
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
javascript时间差插件分享
Jul 18 Javascript
微信小程序开发探究
Dec 27 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
详解vue中使用protobuf踩坑记
May 07 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 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 如何向 MySQL 发送数据
2006/10/09 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
python绘制多个曲线的折线图
2020/03/23 Python
python下载库的步骤方法
2019/10/12 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
SQL面试题
2013/04/30 面试题
安全宣传标语
2014/06/10 职场文书
中学教师暑期培训方案
2014/08/27 职场文书
三年级学生评语大全
2014/12/26 职场文书
计划生育目标责任书
2015/05/09 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python
Golang gRPC HTTP协议转换示例
2022/06/16 Golang
table不让td文字溢出操作方法
2022/12/24 HTML / CSS