键盘事件

//    onkeydown键盘按下的时候触发
//    onkeyup键盘抬起的时候触发
//    ev.keyCode:数字类型,键盘按键的值  键值
//    ctrlKey altKey shiftKey 布尔类型
//    当一件事情发生的时候,如果是ctrl || alt || shift是按下的状态,返回true,否则返回false


//document.onkeydown= function (ev) {
//      var ev=ev||event;
//      alert(ev.keyCode);
//};

    document.onclick=function(ev){
        var ev=ev||event;
        alert(ev.shiftKey);
    }

发送留言

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload= function () {
            var otext=document.getElementById('text1');
            var ul1=document.getElementById('ul1');
            otext.onkeyup= function (ev) {
                var ev=ev||event;
                if(this.value!=''){
                    if(ev.keyCode==13 && ev.ctrlKey){
                        var oli=document.createElement('li');
                        oli.innerHTML=otext.value;
                        if(ul1.children[0]){
                            ul1.insertBefore(oli,ul1.children[0]);
                        }else{
                            ul1.appendChild(oli);
                        }
                    }
                }
            };
        };
    </script>
</head>
<body>
<input type="text" id="text1"/>
<ul id="ul1" id="'ul1"></ul>
</body>
</html>

键盘控制div移动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script>
        window.onload= function () {
              var odiv=document.getElementById('div1');
              document.onkeydown= function (ev) {
                   var ev=ev||event;
                   switch (ev.keyCode){
                       case 37:
                           odiv.style.left=parseInt(getByClass(odiv,'left'))-10+'px';
                           break;
                       case 38:
                           odiv.style.top=parseInt(getByClass(odiv,'top'))-10+'px';
                           break;
                       case 39:
                           odiv.style.left=parseInt(getByClass(odiv,'left'))+10+'px';
                           break;
                       case 40:
                           odiv.style.top=parseInt(getByClass(odiv,'top'))+10+'px';
                           break;
                   }
              };
            function getByClass(obj,attr){
                if(obj.currentStyle){
                    return obj.currentStyle[attr];
                }else{
                    return getComputedStyle(obj)[attr];
                }
            }
        };
    </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lgp20151222

jquery的html,text,val

    1.html()用为读取和修改元素的HTML标签     2.text()用来读取或修改元素的纯文本内容     3.val()用来读取或修改表单元素的...

11220
来自专栏我的博客

DOM基础知识

1.DOM介绍 DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话...

31040
来自专栏云瓣

从 0 到 1 实现 React 系列 —— 组件和 state|props

看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/...)

8910
来自专栏前端知识分享

第208天:jQuery框架封装(一)

1.1冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象或者body)的顺序触发。

33440
来自专栏Golang语言社区

Go-defer,panic,recover

defer 语法: defer function_name() 简单来讲,在defer所在函数执行完所有的代码之后,会自动执行defer的这个函数。 示例一(...

325110
来自专栏coder修行路

CSS补充之--页面布局、js补充,dom补充

CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width...

40970
来自专栏进击的君君的前端之路

Vue成神之路之内部指令

vue.js——开发版本:包含完整的警告和调试模式 vue.min.js——生产版本:删除了警告,进行了压缩

11850
来自专栏游戏杂谈

文字闪烁提示

只是把以前JavaScript对DOM的操作,改用as3写了一个共用类,不限于更改文字颜色。

16310
来自专栏木子昭的博客

用面向对象的方法写"敲门砖"

一道名为"敲门砖"的面试题: 用面向对象的方法写,点击列表内,子元素的子标签, 来删除子元素 ? 考点: 递归(删除标签, 需要找到列表的直属子标签, 需要通...

35530
来自专栏Golang语言社区

Go-defer,panic,recover

defer 语法: defer function_name() 简单来讲,在defer所在函数执行完所有的代码之后,会自动执行defer的这个函数。 示例一(...

30880

扫码关注云+社区

领取腾讯云代金券