js 键盘事件

最新推荐文章于 2024-09-09 22:44:51 发布
原创 最新推荐文章于 2024-09-09 22:44:51 发布 · 670 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#function #javascript #firefox #html #div #up

本文介绍了一种使用JavaScript实现键盘按键控制HTML页面中指定元素移动的方法。通过监听键盘事件，根据用户按下不同的方向键（上、下、左、右），调整指定HTML元素的位置属性，使该元素能在页面上按方向键指示的方向移动。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<div id="dSquare" style="background:#0000FF;POSITION: absolute; width:20px; height:20px; top:50px; left:200px;"></div>
</body>
</html>
<script language=javascript> 
if(typeof GetControl=="undefined") GetControl=function (id)
{
    return document.getElementById(id);
};

var control=GetControl("dSquare");
function KeyDown(e) {                  
            var key;
            try{ 
                   key=event.keyCode;  //取得键盘Code编号
             } 
             catch(a){ //对于Firefox来说，不支持event.keyCode
                   key=KeyDown.arguments[0].keyCode; 
             } 
             
            switch(key)
            {
                case 40://40 == down
                    control.style.top=(parseInt(control.style.top)+1)+ "px";            
                    break;
                case 39://39 == right
                    control.style.left=(parseInt(control.style.left)+1)+ "px";
                    break;
                case 38://38 == up
                    control.style.top=(parseInt(control.style.top)-1)+ "px";
                    break;
                case 37://37 == left    
                    control.style.left=(parseInt(control.style.left)-1)+ "px";
                    break;                    
            }
} 
document.onkeydown=KeyDown; //附加事件
document.onkeypress=KeyDown; //附加事件
</script>
 
linan126
关注
js的三大事件、事件移除、事件循环机制
yiyueqinghui的博客
06-10 5535
三大事件（鼠标事件、键盘事件、html事件） 1、鼠标事件 click：单击 dblclick：双击 mousemove：鼠标移动 mousedown：鼠标按下 mouseup：鼠标抬起 mouseover：鼠标悬浮 mouseout：鼠标离开 mouseenter：鼠标进入 mouseleave：鼠标离开 2、键盘事件 keydown：按键按下 keyup：按键抬起 keypress：按键按下抬起 3、HTML事件 load：文档加载完成 select：被选中的时候 change：内容被改变 f
js键盘事件
12-15
js键盘事件
JS键盘事件
xxhsym的博客
03-05 389
<script type="text/javascript"> window.onload=function(){ /* 键盘事件 onkeydown---按键按下,当按着某个键不松手 则事件会一直触发，连续触发的一次跟第二次间隔长一点， 其他会很快，这种设计是为了误操作的发生 onkeyup---按键松开，不会连续触发 键盘事件一般绑定可以获取焦点的事件 */ var input=...
JavaScript鼠标、键盘交互事件的注册与移除
最新发布
Q_w7742的博客
09-09 624
首先分析需求，为了显示字符H，我们首先要实现一个drawText()函数，Align设置center，Baseline设置middle等。我希望在鼠标点击这个canvas或者键盘按下某个键之后在canvas中心位置显示一个字符“H”。我们这样反复提取函数的目的是为了精简代码，提高代码可读性和可维护性。我希望页面上存在某个区域，点击之后执行某种效果（以显示文字为例）。
（JS基础）事件
weixin_34033624的博客
04-04 343
基本概念定义事件就是用户或浏览器自身执行的某种动作，诸如 click、 load 等。而相应某个事件的函数就叫事件处理程序（或事件侦听器），如 onclick、 onload 等。事件捕获 与 事件冒泡事件冒泡，是指事件开始的时候由最具体的元素（文档中嵌套层次最深的那个点）接受，然后沿着 DOM 树逐级向上传播，直到 "window" 对象为止。事件捕获，与"事件冒泡"相反，从"window"对象...
javascript 键盘事件总结 推荐
12-12
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]不过并不止提交按钮会激发form的submit事件，连同上面的归纳如下： 1. 如果表单里有一个type=”submit”的按钮，回车键生效。 2. 如果表单里只有一个type=”te
js键盘事件实现人物的行走
10-15
然后，通过JavaScript来监听键盘事件，根据用户的按键输入来控制人物的图像变化，从而实现行走或跳跃的动作。 示例代码如下所示： ```html <!DOCTYPE html> <title>JS Keyboard Events for Character Movement...
浅谈js键盘事件全面控制
11-29
【标题】：深入理解JavaScript键盘事件的控制与兼容性处理 【内容】： 在JavaScript中，键盘事件是我们处理用户输入的重要途径，特别是对于交互性强的Web应用，如在线编辑器、游戏或者表单验证。本文将详细介绍...
js键盘事件的keyCode
01-19
[removed] = function(event){ var event = event || window.event; alert(event.keyCode); }
js 禁止某些键盘事件
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
08-19 4417
document.addEventListener('keydown', function(event){ return !( 112 == event.keyCode || //F1 123 == event.keyCode || //F12 event.ctrlKey && 82 == event.keyCode || ...
js取消键盘监听_Js屏蔽键盘事件
weixin_35419195的博客
12-31 1113
function KeyDown(){ //屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键//alert("ASCII代码是："+event.keyCode);if ( (window.event.altKey)&&( (window.event.keyCode==37)|| //屏蔽 Alt+ 方向键 ←(window.event.keyCode==39) )...
js textarea 或 可编辑div 上，键盘停止操作n秒后执行事件
默默地博客
02-09 943
&lt;textarea&gt;&lt;/textarea&gt; or &lt;div contenteditable="true"&gt;&lt;/div&gt; // 输入的值 var editor_start = 0; // 对比时间的值 var editor_end = 0; var timer = null; // a 为 textarea 或 可编辑div...
js的键盘事件
zhangjing1019的博客
01-11 1421
$(document).keypress(function (e) { if($('#memberReception').css('display') == 'block'){ if (e.keyCode == 13){ //此处写代码 }
html页面加载完成后会触发的事件_JS事件、Bom对象和Dom对象
weixin_39740283的博客
11-29 5117
JS事件、Bom对象和Dom对象主要内容事件​ 事件 (Event) 是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。​ 通过...
js中键盘事件监听——阻止默认事件
仗剑随风
08-10 4469
  //enter键盘事件 $(".form-control").keydown(function(event){ event = event ? event: window.event; if(event.keyCode == 13){ addTemplate(); ...
JS监听安卓软键盘删除键
qq_43734389的博客
01-19 3259
web前端开发去整移动端页面真实老折磨了 @input反正不论是什么dom肯定都能触发的，那就在input的回调里面看输入类型 这次需求要做光标定位，得上selection和range那一套所以用的是div，但是input也是OK的 然后这个东西好就好在IOS也是兼容的 <div type="text" @input="onInput" contenteditable="true"></div> onInput(event) { if(event.inputType == 'de
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件
热门推荐
xuehyunyu的博客
07-25 1万+
示例代码： HTML文件： HTML文件 window.onload=function () { var d=document.getElementById('d'); //内容发生改变，并焦点发生改变，才可以监听到 d.onchange=function () {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值