页面内容：文本框模拟键盘点击   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. JS-JS变量命名规则

    原则 变量名区分大小写,允许包含字母.数字.美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号. 禁止使用JavaScript关键词.保留字全名. 变量命名长度应该尽可能的 ...

  2. Newtonsoft的序列化和反序列化

    class test    {        public string a;       public int b;        public byte[] c;        public In ...

  3. C# 获取电脑MAC地址，IP地址，物理内存，CPU序列号，硬盘ID..........................

    上班很忙,自己做个记录 代码如下: 需要引入:System.Management 代码如下: using System; using System.Collections.Generic; using ...

  4. 《Head First 设计模式》例子的C++实现（5 单例模式）

    最近在学习设计模式,用的是 <Head First 设计模式>这本书.感觉这本书写的还是很不错的,深入浅出的介绍了各种常用的设计模式.唯一有点不方便的地方是这本书的例子全都是用的 Java ...

  5. mybatis-高级结果映射之一对一

    mybatis的高级结果映射可以很轻松的帮助我们处理一对一, 一对多的数据关系. 1 数据准备 1.1 数据库 创建以下的名为 mybatis 的数据库, 并在其下创建4个表. 在此就不贴出来建表的 ...

  6. Flask系列学习

    一.Flask系列学习(基础) Flask学习-前言 Flask学习-Flask基础之WSGI Flask学习-Flask app启动过程 Flask学习-Flask app接受第一个HTTP请求 F ...

  7. 在Ubuntu18.04下将应用程序添加到启动器

    # 在启动器里面给应用程序添加一个快捷方式 在linux(ubuntu)平台下,很多小伙伴发现,自己去官网下载解压的软件不能自动添加到启动器,每次启动的时候需要再次进入软件目录输入命令,非常不方便.本 ...

  8. NuGet 使用笔记

    环境准备 1. 下载nuget : https://www.nuget.org/downloads 2. 设置到环境变量Path, 使生效:在Cmd打入: set path=abc  关闭Cmd (C ...

  9. 索引节点(inode)爆满问题处理

    关于磁盘空间中索引节点爆满的问题还是挺多的,借此跟大家分享几个情况: 情况一 在公司一台配置较低的Linux服务器(内存.硬盘比较小)的/data分区内创建文件时,系统提示磁盘空间不足,用df -h命 ...

  10. 牛客训练赛25-A-最长区间

    https://www.nowcoder.com/acm/contest/158#question 这题问最长的严格连续递增序列的最长长度是多少? 最开始感觉这道题不可做,因为有1e5个点,还有1e5 ...