页面内容：文本框模拟键盘点击   div元素实现移动；

  1. <body>
  2. <textarea id="myarea"></textarea>
  3. <hr>
  4. <div id="mydiv" title="dddddiv"></div>
  5. </body>

div样式可以自行定义；

JS脚本代码如下：

当键盘输入'a'或'A'时，div向左移动10px

  1. <script type="text/javascript">
  2. var myarea = document.getElementById("myarea");
  3. var mydiv = document.getElementById("mydiv");
  4. //event是键盘事件对象，能后识别按下的是哪个键
  5. var a = mydiv.offsetLeft;
  6. //var a = mydiv.offsetWidth;
  7. //var a = window.getComputedStyle(mydiv).left;;
  8. myarea.onkeypress = function(event) {
  9. //alert(event.keyCode);
  10. //var odiv = document.getElementById(“mydiv”);
  11. //alert(odiv.getAttribute(“title”));
  12. if(event.keyCode == "65"|| event.keyCode == "97") {
  13. a=a-10;
  14. //var b = a + “px”;
  15. //alert(a);
  16. var i = "20px"
  17. mydiv.style.left = a + "px";
  18. }
  19. }
  20. </script>

　　

JS通过键盘点击事件实现div移动的更多相关文章

  1. js触发按钮点击事件

    js触发按钮点击事件 博客分类: javascript   模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...

  2. js中的点击事件（click）的实现方式

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. js input radio点击事件

    html代码: <input type="radio" name="myname" value="1" />1 <inpu ...

  4. bootstrap table 生成的表格里动态添加HTML元素按钮，JS中添加点击事件，点击没反应---解决办法

    bootstraptable中onExpandRow属性---js  方法添加的 html代码,然后给这代码里面的 元素 添加 事件,却获取不该元素.(称之为未来元素),由于是未来的 所以现在没有这个 ...

  5. JS控制鼠标点击事件

    鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击 登录时,就会出现登录窗口.大体的意思就是这样,直接上代码了,简单易懂. <!DOCTY ...

  6. js模拟自动点击事件

    1.直接上代码很直观 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  7. js/jquery 禁用点击事件

    前言 工作中经常遇到这种情况:验证邮箱页面的重新发送需要在3分钟后才可以点击触发请求,所以在这之前需要禁用他的点击. 网上查了后有以下几种实现方法 1.css禁用鼠标点击事件 .disabled { ...

  8. js 触发LinkButton点击事件，执行后台方法

    页面 <asp:LinkButton ID="lbtButton" runat="server"  CssClass="lbtButton&qu ...

  9. jq再次封装自己的ajax & js 回调函数 & js方法注释&js 全局屏蔽点击事件及a标签

    1.封装成一个独立JS var commonUrl = 'http://xx.xxx.com/'; function http({ url, type = "post", data ...

随机推荐

  1. linux安装jdk与配置-centos7版本

    1.Linux安裝jdk 1.如果電腦沒有wget命令的,先使用yum安裝wget命令. eg: yum install wget 2.安裝好后就可以直接使用wget命令去下載jdk. 附:打開官網連 ...

  2. 3.《想成为黑客，不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——检查文件

    上面我们已经学过如何创建及操作文件,现在我们再来学习检查内容.当文件太长以至于屏幕一页显示不完时,这显得尤其重要.特殊情形下,如我们在第2.1章节开始部分中使用cat命令将内容展示到屏幕上,但这对于长 ...

  3. Java 中 LinkedList 和 ArrayList 的区别

    引自:https://www.cnblogs.com/huzi007/p/5550440.html ArrayList和LinkedList的大致区别如下:1.ArrayList是实现了基于动态数组的 ...

  4. 大话设计模式(C#)

    还是那几句话: 学无止境,精益求精 十年河东,十年河西,莫欺少年穷 学历代表你的过去,能力代表你的现在,学习代表你的将来 问个问题: 如何写出高质量的代码?灵活,可扩展,易读,易维护,可重构,可复用. ...

  5. Socket入门笔记 用TcpClient实现一个简易聊天室

    效果 实现思路 使用TcpListener建一个服务器,接收所有客户端发送的消息,然后由服务器再发送到其他客户端 客户端使用TcpClient,发消息给服务器,接收服务器的消息,不和其他客户端直接交互 ...

  6. cgroup.conf系统初始配置

    # Slurm cgroup support configuration file # # See man slurm.conf and man cgroup.conf for further # i ...

  7. 程序员从技术开发到项目管理PM--思维转变

    对以往所做项目的经验做下总结,作为项目经理首先要对项目负责,思维要做下转变,要从项目全局角度考虑问题:     从个人成就到团队成就. 无论是做管理还是做技术,成就导向意识是优秀员工的基本素质.只有具 ...

  8. 使用IntelliJ IDEA开发SpringMVC网站（二）框架配置

    原文:使用IntelliJ IDEA开发SpringMVC网站(二)框架配置 摘要 讲解如何配置SpringMVC框架xml,以及如何在Tomcat中运行 目录[-] 文章已针对IDEA 15做了一定 ...

  9. centos下部署redis服务环境及其配置说明

    Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发工作由VMware主 ...

  10. 20135218 实践四 ELF文件格式分析

    一 :概述 ELF全称Executable and Linkable Format,可执行连接格式,ELF格式的文件用于存储Linux程序.ELF文件(目标文件)格式主要三种: (1)可重定向文件:文 ...