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

<body>

<textarea id="myarea"></textarea>

<hr>

<div id="mydiv" title="dddddiv"></div>

</body>

div样式可以自行定义；

JS脚本代码如下：

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

<script type="text/javascript">

var myarea = document.getElementById("myarea");

var mydiv = document.getElementById("mydiv");

//event是键盘事件对象，能后识别按下的是哪个键

var a = mydiv.offsetLeft;

//var a = mydiv.offsetWidth;

//var a = window.getComputedStyle(mydiv).left;;

myarea.onkeypress = function(event) {

//alert(event.keyCode);

//var odiv = document.getElementById(“mydiv”);

//alert(odiv.getAttribute(“title”));

if(event.keyCode == "65"|| event.keyCode == "97") {

a=a-10;

//var b = a + “px”;

//alert(a);

var i = "20px"

mydiv.style.left = a + "px";

}

}

</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. fastcgi_next_upstream error timeout invalid_header http_500 http_503（转）

    location / proxy_pass http://nodelist; fastcgi_next_upstream error timeout invalid_header http_500 h ...

  2. omcat+java的web程序持续占cpu高问题调试【转】

    1.top -c 2.查看具体线程 ps -m -p 30997 -o tid,%cpu,%mem > threads.log 3.printf %x 31865 其次将需要的线程ID转换为16 ...

  3. NOI.ac #8 小w、小j和小z LIS

    传送门 题意:在一个数轴上,给出$N$个人的初始位置与速度(速度有方向),求最大的时间使得存在$N-K$个人在这一段时间内两两没有相遇.$1 \leq K \leq N \leq 10^5$ 显然有二 ...

  4. OSC Source Code Innovation Salon（2018.10.20）

    时间:2018.10.20地点:北京 朝阳 浦项中心B座2层

  5. SequenceFile文件

    SequenceFile文件是Hadoop用来存储二进制形式的key-value对而设计的一种平面文件(Flat File).目前,也有不少人在该文件的基础之上提出了一些HDFS中小文件存储的解决方案 ...

  6. 【福利】送Spark大数据平台视频学习资料

    没有套路真的是送!! 大家都知道,大数据行业spark很重要,那话我就不多说了,贴心的大叔给你找了份spark的资料.   多啰嗦两句,一个好的程序猿的基本素养是学习能力和自驱力.视频给了你们,能不能 ...

  7. Zabbix监控系统部署：配置详解

    1. 全局配置 ListenPort ,监听端口 ,取值范围为1024-32767,默认端口10051 SourceIP,外发连接源地址 LogType,日志类型:单独日志文件,系统文件,控制台输出 ...

  8. Jmeter（非GUI模式）教程

    前言 使用非 GUI 模式,即命令行模式运行 JMeter 测试脚本能够大大缩减所需要的系统资源.优点如下:1.节约系统资源:无需启动界面,节约系统资源 2.便捷快速:仅需启动命令行,输入命令便可执行 ...

  9. RSA加密算法深入篇

    如果你问我,哪一种算法最重要? 我可能会回答"公钥加密算法". 因为它是计算机通信安全的基石,保证了加密数据不会被破解.你可以想象一下,信用卡交易被破解的后果. 进入正题之前,我先 ...

  10. HDU-6440-费马小定理

    亏我前几天还学数论呢...没有深入研究费马小定理这个东西...做事情一定要静下心来啊... 题目要求满足(m+n)^p=m^p+n^p,要你定义一个封闭的新的加法和乘法运算 我们知道费马小定理中有两种 ...