页面内容：文本框模拟键盘点击   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. LinqPad的变量比较功能

    LinqPad是一个非常方便的C#工具(有免费版和收费版). 今天发现它的变量比较功能真是方便啊.且看3行代码产生如下结果: 说明:图中两个变量的成员属性值分别用红色和绿色背景标注:图很长,只截取了一 ...

  2. C# 套接字编程：Scoket，我用Scoket做的C# Windows应用程序如下：

    首先请允许我做一个截图: 以上,是我服务端设计 我们知道:服务器端口数最大可以有65535个,但是实际上常用的端口才几十个,由此可以看出未定义的端口相当多.因此,我们可以通过程序随机获取一个当前可用的 ...

  3. [BZOJ2125]最短路[圆方树]

    题意 给定仙人掌,多次询问两点之间的最短路径. \(n\le 10000, Q\le 10000​\) 分析 建出圆方树,分路径 lca 是圆点还是方点讨论. 预处理出根圆点到每个圆点的最短距离 \( ...

  4. .NetCore实践篇：分布式监控Zipkin持久化之殇

    前言 本系列已写了四篇文章,读本篇之前,可以先读前面几篇. 思考大纲:.Net架构篇:思考如何设计一款实用的分布式监控系统? 实践篇一:.NetCore实践篇:分布式监控客户端ZipkinTracer ...

  5. 初识 tk.mybatis.mapper 通用mapper

    在博客园发表Mybatis Dynamic Query后,一位园友问我知不知道通用mapper,仔细去找了一下,还真的有啊,比较好的就是abel533写的tk.mybatis.mapper. 本次例子 ...

  6. OpenStack构架知识梳理

    OpenStack既是一个社区,也是一个项目和一个开源软件,提供开放源码软件,建立公共和私有云,它提供了一个部署云的操作平台或工具集,其宗旨在于:帮助组织运行为虚拟计算或存储服务的云,为公有云.私有云 ...

  7. hive基础操作—(1)

    执行./hive命令后,进入CLI(shell)模式: 1.创建数据库,语句: create database school; 2.展示所有的数据库,语句: show databases; 3.选择使 ...

  8. nginx try_files 详解

    server { listen ; server_name localhost; index index.html index.htm index.php; root /data/wwwroot; l ...

  9. Linux内核分析——程序破解

    1. 掌握NOP.JNE.JE.JMP.CMP汇编指令的机器码 NOP:NOP指令即“空指令”.执行到NOP指令时,CPU什么也不做,仅仅当做一个指令执行过去并继续执行NOP后面的一条指令.(机器码: ...

  10. Struts2中的图片验证码

    1.Struts中建一个action <action name="Code" class="LoginAction" method="code& ...