day48—JavaScript键盘事件
转行学开发,代码100天——2018-05-03
今天继续学习JavaScript事件基础之键盘事件。
键盘代号获取 keyCode
键盘事件:onkeydown onkeyup
如通过键盘上下左右按键操控物体移动的应用
<!DOCTYPE html>
<html>
<head>
<title>javascript 键盘事件</title>
<style type="text/css">
#div1{width: 100px;height: 100px;background: #ccc;position: absolute;}
</style>
<script type="text/javascript">
window.onkeydown = function(ev){
var oEvent = ev||event;
// alert(oEvent.keyCode);
var oDiv = document.getElementById("div1");
if (oEvent.keyCode==37) { //向左
oDiv.style.left = oDiv.offsetLeft-10+"px";
}else if(oEvent.keyCode==39) //向右
{
oDiv.style.left = oDiv.offsetLeft+10+"px";
}else if(oEvent.keyCode==38) //向上
{
oDiv.style.top = oDiv.offsetTop-10+"px";
}else if(oEvent.keyCode==40) //向下
{
oDiv.style.top = oDiv.offsetTop+10+"px";
}
};
</script>
</head>
<body>
<div id="div1"></div> </body>
</html>
其他常用的几个键盘按钮
enter keyCode==13
ctrlKey
shiftKey
altKey
如一个通过CTRL+ENTER进行文本提交的功能
类似的功能之前通过一个按钮实现,即是为其添加一个点击事件,如果去除按钮,需要对文本输入框添加一个键盘事件。
下面的代码中注释部分为按钮实现,保留部分是enter键实现。
oTxt1.onkeydown = function(ev){
var oEvent = ev||event;
if (oEvent.keyCode==13 &&oEvent.ctrlKey) {
oTxt2.value +=oTxt1.value+"\n";
oTxt1.value="";
}
}
<!DOCTYPE html>
<html>
<head>
<title>键盘发ctrl+enter布效果</title>
<script type="text/javascript">
window.onload = function()
{
var oTxt1 = document.getElementById("txt1");
var oTxt2 = document.getElementById("txt2");
// var oBtn = document.getElementById("btn"); // oBtn.onclick = function()
// {
// oTxt2.value +=oTxt1.value+"\n";
// oTxt1.value="";
// } oTxt1.onkeydown = function(ev){
var oEvent = ev||event;
if (oEvent.keyCode==13) {
oTxt2.value +=oTxt1.value+"\n";
oTxt1.value="";
}
}
}
</script>
</head>
<body>
<input id="txt1" type="text" name="">
<!-- <input id="btn" type="button" value="发布" > -->
<br/><br/>
<textarea id="txt2"></textarea>
</body>
</html>
如果改成ctrl+enter时只需要在判断条件中添加oEvent.ctrlKey
oTxt1.onkeydown = function(ev){
var oEvent = ev||event;
if (oEvent.keyCode==13 &&oEvent.ctrlKey) {
oTxt2.value +=oTxt1.value+"\n";
oTxt1.value="";
}
}
day48—JavaScript键盘事件的更多相关文章
- JavaScript键盘事件全面控制代码
JavaScript键盘事件全面控制,它可以捕获键盘事件的输入状态,可以判断你敲打了键盘的那个键,ctrl.shift,26个字母等等,返回具体键盘值. <html> <head&g ...
- javascript 键盘事件总结
原文:http://www.cnblogs.com/rubylouvre/archive/2009/08/20/1550526.html#2583814 在进入正题前,我们看一下浏览器对于键盘的一些默 ...
- Javascript 键盘事件
window.document.onkeydown = function (e) { var evt = window.event || e;//兼容性处理 var keycode = evt.key ...
- JavaScript的事件对象_键盘事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- javascript的键盘事件大全
javascript的键盘事件大全 ------------------------------------------------------------------- 使用event对象的keyC ...
- JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;
JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...
- JavaScript的事件对象中的特殊属性和方法(鼠标,键盘)
鼠标操作导致的事件对象中的特殊属性和方法 鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等 鼠标按钮 只有在主鼠标按钮被单 ...
- JavaScript的事件的处理函数(鼠标,键盘,HTML)
事件处理函数概述 JavaScript 可以处理的事件类型为:鼠标事件.键盘事件.HTML 事件 所有的事件处理函数都会都有两个部分组成,on + 事件名称,例如 click 事件的事件处理函数就是: ...
- JavaScript onkeydown事件入门实例(键盘某个按键被按下)
JavaScript onkeydown 事件 用户按下一个键盘按键时会触发 onkeydown 事件.与 onkeypress事件不同的是,onkeydown 事件是响应任意键按下的处理(包括功能键 ...
随机推荐
- golang 状态机
package main import ( "errors" "fmt" "reflect" ) type State interface ...
- 【源码解读】cycleGAN(一):网络
源码地址:https://github.com/aitorzip/PyTorch-CycleGAN 如图所示,cycleGAN的网络结构包括两个生成器G(X->Y)和F(Y->X),两个判 ...
- 在SQL中存储过程的一般语法
一般分为十种情况,每种语法各不相同: 1. 创建语法 1 2 3 4 5 6 7 create proc | procedure pro_name [{@参数数据类型} [=默认值] [outp ...
- mingetty - 控制台最小的 getty
总览 SYNOPSIS mingetty [--noclear] [--nonewline] [--noissue] [--nohangup] [--nohostname] [--long-hostn ...
- 软件包管理(rpm、yum、dpkg)
一. 大多数Linux应用软件包的命名也有一定的规律,它遵循:名称-版本-修正版-类型,通常Linux应用软件的安装包有三种: 1) tar包,如software-1.2.3-1.tar.gz.以源码 ...
- 实现自己的BeanFactory、AOP以及声明式事务
实现自己的BeanFactory 在使用spring时,我们很少用& ...
- pandas读取Excel文件
In [7]: import pandas as pd filname = 'ch02数据导入\\student.xlsx' data = pd.read_excel(filname) data Ou ...
- curl 详解
本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群: 281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...
- 组件通信 eventtBus
平级组件的通信 一个全局发布订阅模式,它是挂载到全局的 <!DOCTYPE html> <html lang="en"> <head> < ...
- 前端之JQuery:JQuery基本语法
jQuery基本语法 一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似py ...