页面内容：文本框模拟键盘点击   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. three.js - 动画 图形统计帧频 dat.GUI

    运行一把: 代码解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. 基于TDA4863-2的单级PFC反激LED电源设计与仿真

    LED是一个非线性器件,正向电压的微小变化会引起电流的巨大变化:LED是一个半导体二极管,其伏安特性随温度变化而变化(-2mV/℃),假如温度升高,在恒压驱动下LED的电流会增加.长期超过额定电流工作 ...

  3. java中的SHA单向加密

    SHA全名叫做安全散列算法,是FIPS所认证的安全散列算法.能计算出一个数字消息所对应到的,长度固定的字符串(又称消息摘要)的算法.且若输入的消息不同,它们对应到不同字符串的机率很高. package ...

  4. React-引入图片的方法

    方法一: import imgURL from '../../images/logo.png'; <img src={imgURL} alt="1"/> 方法二: &l ...

  5. Luogu P4427 [BJOI2018]求和

    这是一道巨狗题,我已无力吐槽为什么我怎么写都不过 我们对于这种无修改的边权题目有一个经典的树上差分套路: \(ans=sum_x+sum_y-2\cdot sum_{LCA(x,y)}\) 这里的\( ...

  6. package-lock.json的作用

    其实用一句话来概括很简单,就是锁定安装时的包的版本号,并且需要上传到git,以保证其他人在npm install时大家的依赖能保证一致. 引用知乎@周载南的回答 根据官方文档,这个package-lo ...

  7. 冲刺Two之站立会议10

    今天是最后一次站立会议,我们为自己软件最终版的发布进行了讨论,针对项目开发过程中出现的问题进行了总结.并讨论了之后软件如何发布和推广.

  8. beta版说明书

    项目名称:GoGoing 软件使用说明: 在主界面是可以点击选择景点门票区间来选择景点,同时也可搜索景点显示信息. 还可以通过定位功能显示附近景点. 点开门票区间后是一些景点的图片和简介,还可以通过距 ...

  9. Voltage Keepsake CodeForces - 801C （思维+二分）

    题目链接 这是一道很棒的二分题. 思路: 首先先思考什么情况下是可以无限的使用,即输出-1. 我们思考可知,如果每一秒内所有设备的用电量总和小于等于充电器每秒可以充的电,那么这一群设备就可以无限使用. ...

  10. Beta阶段敏捷冲刺三

    一.举行站立式会议 1.当天站立式会议照片一张 2.团队成员报告 林楚虹 (1) 昨天已完成的工作:从数据库读取单词 (2) 今天计划完成的工作:在数据库单词表导入完整数据,完善select.js ( ...