Javascript 事件对象(六)键盘事件
keyCode
获取用户按下键盘的哪个按键
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
/*
onkeydown : 当键盘按键按下的时候触发
onkeyup : 当键盘按键抬起的时候触发 event.keyCode : 数字类型 键盘按键的值 键值
ctrlKey,shiftKey,altKey 布尔值
当一个事件发生的时候,如果ctrl || shift || alt 是按下的状态,返回true,否则返回false
*/ document.onkeydown = function(ev) { //alert(1);
var ev = ev || event;
//alert(ev.keyCode); } document.onclick = function(ev) {
var ev = ev || event; alert(ev.ctrlKey);
}
</script>
</head> <body>
</body>
</html>
键盘事件实例:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() { var oText = document.getElementById('text1');
var oUl = document.getElementById('ul1'); oText.onkeyup = function(ev) { var ev = ev || event; //alert(this.value);
if ( this.value != '' ) { if (ev.keyCode == 13 && ev.ctrlKey) { var oLi = document.createElement('li');
oLi.innerHTML = this.value; if ( oUl.children[0] ) {
oUl.insertBefore( oLi, oUl.children[0] );
} else {
oUl.appendChild( oLi );
} } } } }
</script>
</head> <body>
<input type="text" id="text1" />
<ul id="ul1"></ul>
</body>
</html>
键盘控制div移动:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute;}
</style>
<script>
window.onload = function() { var oDiv = document.getElementById('div1'); //不是所有元素都能够接收键盘事件,能够响应用户输入的元素,能够接收焦点的元素就能够接收键盘事件 //onkeydown : 如果按下不抬起,那么会连续触发
//定时器
document.onkeydown = function(ev) { var ev = ev || event; switch(ev.keyCode) {
case 37:
oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
break;
case 38:
oDiv.style.top = oDiv.offsetTop - 10 + 'px';
break;
case 39:
oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
break;
case 40:
oDiv.style.top = oDiv.offsetTop + 10 + 'px';
break;
} } }
</script>
</head> <body>
<div id="div1"></div>
</body>
</html>
Javascript 事件对象(六)键盘事件的更多相关文章
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- JavaScript的事件对象_键盘事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- 常用MouseEvent鼠标事件对象&KeyboardEvent键盘事件对象&常用键盘码
MouseEvent鼠标事件对象: e.target //=> 事件源(操作的是哪个元素) e.clientX e.clientY //当前鼠标触发点距离当前窗口左上角的X|Y轴坐标 e.pag ...
- 简单总结焦点事件、Event事件对象、冒泡事件
每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...
- javaScript事件(六)事件类型之滚轮事件
滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...
- JavaScript的事件对象_滚轮事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- javascript每日一练(七)——事件二:键盘事件
一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> ...
- vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
随机推荐
- rtc关机闹钟2 Alarm manager
public void set(int type, long triggerAtMillis, long windowMillis, long intervalMillis, PendingInten ...
- Sql Server Alter语句
1:向表中添加字段 Alter table [表名] add [列名] 类型 2: 删除字段 Alter table [表名] drop column [列名] 3: 修改表中字段类型 (可以修 ...
- css属性的书写
书写顺序: 注释方式: /* 块状注释文字 * 块状注释文字 * 块状注释文字 */ .m-list{width:500px;} .m-list li{height:20px;line-height: ...
- 通过JS检测360浏览器
如何通过JS检测360浏览器? 尝试了一大堆方法,网上大多数办法都是通过navigator.userAgent来判断,这可能在几年前是行得通的,现在360userAgent输出来跟谷歌除了版本号其余一 ...
- Entity Framework – (复数)Plural and (单数)Singular 表名Table names
By default, the Entity Framework will assume that all of the names of your tables in your database a ...
- leetcode6
好吧,今天晚上赶项目确实是做不了三道题目了,最近项目在网络编程方面有些进步,学到了东西,有时间再积累下来,很深的体会就是,和别人一起写代码,虽然蛋疼但是比自己一个人写要好点,不过发现自己对链表和排序什 ...
- Bootstrap<基础十六> 导航元素
Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切 ...
- 使用Crowd2.7集成Confluence5.3与JIRA6.1,并安装、破解及汉化,实现单点登录【原创】
鉴于目前没有针对Crowd.Confluence.Jira安装.集成和破解最新的方法,总结今天安装.破解及集成的经验,编写此文,方便大家进行配置也方便自己以后参考.此文参考多篇破解文章,并经过作者 ...
- AngularJS - Passing data between pages
You need to create a service to be able to share data between controllers. app.factory('myService', ...
- 几种排序算法的学习,利用Python和C实现
之前学过的都忘了,也没好好做过总结,现在总结一下. 时间复杂度和空间复杂度的概念: 1.空间复杂度:是程序运行所以需要的额外消耗存储空间,一般的递归算法就要有o(n)的空间复杂度了,简单说就是递归集算 ...