页面内容：文本框模拟键盘点击   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. SkylineGlobe 如何二次开发实现天际线分析功能

    天际线效果: 示例代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <h ...

  2. 10-51单片机ESP8266学习-AT指令(ESP8266连接路由器,建立TCP服务器,分别和C#TCP客户端和AndroidTCP客户端通信+花生壳远程通信)

    http://www.cnblogs.com/yangfengwu/p/8871464.html 先把源码和资料链接放到这里 源码链接:https://pan.baidu.com/s/1wT8KAOI ...

  3. php实现一个单链表

    单链表,节点只有一个指针域的链表.节点包括数据域和指针域. 因此用面向对象的思维,节点类的属性就有两个:一个data(表示存储的数据),一个指针next(链表中指向下一个节点). 链表一个很重要的特性 ...

  4. Luogu3162 CQOI2012 组装 贪心

    传送门 如果提供每一种零件的生产车间固定了,那么总时间\(t\)与组装车间的位置\(x\)的关系就是 \(t = \sum (x-a_i)^2 = nx^2-2\sum a_ix + \sum a_i ...

  5. Luogu3352 ZJOI2016 线段树 概率、区间DP

    传送门 考虑对于每一个位置\(i\),计算所有可能的结果出现的概率. 定义一个区间\([l,r]\)为对于\(x\)的极大区间,当且仅当\(\max \limits _{i=l}^r \{a_i\} ...

  6. 一个比较变态的js传值，Query的bind、ajax闭包、上下文传值

    var getIDNameList = function (list, selected, text, btn, actionUrl, defaultKey, deleteKey, keyName, ...

  7. [Spark][Python]sortByKey 例子

    [Spark][Python]sortByKey 例子: [training@localhost ~]$ hdfs dfs -cat test02.txt00002 sku01000001 sku93 ...

  8. BugkuCTF SQL注入1

    前言 写了这么久的web题,算是把它基础部分都刷完了一遍,以下的几天将持续更新BugkuCTF WEB部分的题解,为了不影响阅读,所以每道题的题解都以单独一篇文章的形式发表,感谢大家一直以来的支持和理 ...

  9. nginx负载均衡（5种方式）、rewrite重写规则及多server反代配置梳理

    Nginx除了可以用作web服务器外,他还可以用来做高性能的反向代理服务器,它能提供稳定高效的负载均衡解决方案.nginx可以用轮询.IP哈希.URL哈希等方式调度后端服务器,同时也能提供健康检查功能 ...

  10. Mysql基于GTID复制模式-运维小结 (完整篇)

    先来看mysql5.6主从同步操作时遇到的一个报错:mysql> change master to master_host='192.168.10.59',master_user='repli' ...