javascript每日一练（七）——事件二：键盘事件
一、键盘事件
onkeydown触发， keyCode键盘编码 ctrlKey altKey shiftKey
键盘控制div移动
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute;}
</style>
<script>
document.onkeydown = function(ev){
var oEvent = ev || event;
var oDiv = document.getElementById('div1');
switch(oEvent.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>
ctrl+enter提交留言
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function(){
var oTxt1 = document.getElementById('txt1');
var oTxt2 = document.getElementById('txt2');
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
oTxt1.innerHTML += oTxt2.value+'\n';
oTxt2.value = '';
};
document.onkeydown = function(ev){
var oEvent = ev || event;
//alert(oEvent.keyCode);
if(oEvent.ctrlKey && oEvent.keyCode == 13 ){
oBtn.click();
}
};
};
</script>
</head>
<body>
<textarea id="txt1" rows="10" cols="40"></textarea><br />
<input type="text" id="txt2" /><input type="button" id="btn1" value="提交"/>(ctrl+enter)
</body>
</html>
javascript每日一练（七）——事件二：键盘事件的更多相关文章
- javascript每日一练（十二）——运动框架
运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8&q ...
- 前端（十五）—— JavaScript事件：绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件
JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...
- jacascript 鼠标事件和键盘事件
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 鼠标事件 鼠标事件共10类,包括click.contextmenu(右键).dblclick(双击).mo ...
- Python_Selenium之basepage 识别元素、浏览器操作、获取属性、鼠标事件、键盘事件、弹窗、切换frame、切换句柄等封装
#coding=gbkimport osimport timefrom selenium import webdriverfrom selenium.webdriver.common.by impor ...
- 基于OpenGL编写一个简易的2D渲染框架-07 鼠标事件和键盘事件
这次为程序添加鼠标事件和键盘事件 当检测到鼠标事件和键盘事件的信息时,捕获其信息并将信息传送到需要信息的对象处理.为此,需要一个可以分派信息的对象,这个对象能够正确的把信息交到正确的对象. 实现思路: ...
- javascript每日一练（一）——javascript基础
一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function ...
- JavaScript(js)处理的HTML事件、键盘事件、鼠标事件
示例代码: HTML文件: <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...
- javascript（九）事件冒泡 onmouseenter onmouseenter 默认事件 和 键盘事件
1 事件冒泡 子元素触发的事件,会往上(父元素)传递: 例子: <div id="box"> <p></p> </div> < ...
- jQuery-3.事件篇---键盘事件
jQuery键盘事件之keydown()与keyup()事件 鼠标有mousedown,mouseup之类的事件,这是根据人的手势动作分解的2个触发行为.相对应的键盘也有这类事件,将用户行为分解成2个 ...
随机推荐
- POJ1797 Heavy Transportation 【Dijkstra】
Heavy Transportation Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 21037 Accepted: ...
- linux下操作gpio寄存器的方法
一. 在驱动中: 1. 用的时候映射端口:ioremap; #define GPIO_OFT(x) ((x) - 0x56000000) #define GPFCON (*(volatile unsi ...
- 条款05：了解C++默默编写并调用哪些函数
每一个class都会有一个或多个构造函数.一个析构函数.一个copy assignment操作符.这些控制着基础操作,像是产出新对象并确保它被初始化.摆脱旧对象并确保它被适当清理.以及赋予对象新值. ...
- atexit模块解析
atexit模块很简单,只定义了一个register函数用于注册程序退出时的回调函数,我们可以在回调函数中做一些资源清理的操作. 注意回调函数只有正常退出的时候才会调用,如果程序是被信号杀死或者因为严 ...
- Python之路Day19
志不坚者智不达. 主要内容:Django分页.自定义simpletag.权限管理 Django分页 Django自带了一个分页功能,使用起来很方便.官方文档 先来看一下效果图: 后台代码: def c ...
- CSS3 transform制作的漂亮的滚动式导航
模拟这个做的 不过实现的没有别人那么好 http://www.creativetier.com/products/modern-menu-3/vertical.html 关于transform 看这 ...
- Microsoft Jet 数据库引擎找不到对象'Sheet1$_'。请确定对象是否存在，并正确地写出它的名称和路径
We have a CRM add-on for Importing Price Lists into CRM. For this tool, we expect the details to be ...
- MVC3 Razor @RenderSection
Mvc3的Razor视图引擎还提供了@RenderSection @RenderSection在母版页中占个位,然后让使用此母版页的子页自己去呈现他们的Section. 在母版页_Layout.csh ...
- 转: css实现垂直居中的方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中 ...
- thinkphp 常用的查询
php 常用的数据库查询方式: //根据where 条件查询,使用select()方法 访问:http://localhost/thinkphp2/index.php/Machine/search_i ...