页面内容：文本框模拟键盘点击   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. 【第196期】Drupal7 Features模块与 Drupal8 Configuration Management 模块对比

    Drupal 8 最好和最受欢迎的部分之一是新的配置管理系统. 该系统使开发人员很容易将配置导出到代码中.在此之前,开发人员不得不依赖于由Features.Strongarm.UUID.Feature ...

  2. 复习C#的方法Math.Max和Math.Min

    温故而知新,今天学习Math.Max和Min的方法.这2个方法,均需要传入2个参数,返回参数中最大值和最小值. class Ac { public void LeanMathFunction() { ...

  3. WPF loading遮罩层 LoadingMask

    原文:WPF loading遮罩层 LoadingMask 大家可能很纠结在异步query数据的时候想在wpf程序中显示一个loading的遮罩吧 今天就为大家介绍下遮罩的制作 源码下载 点击此处 先 ...

  4. .NET持续集成与自动化部署之路第一篇——半天搭建你的Jenkins持续集成与自动化部署系统

    .NET持续集成与自动化部署之路第一篇(半天搭建你的Jenkins持续集成与自动化部署系统) 前言     相信每一位程序员都经历过深夜加班上线的痛苦!而作为一个加班上线如家常便饭的码农,更是深感其痛 ...

  5. .Net并行编程（一）-TPL之数据并行

    前言 许多个人计算机和工作站都有多个CPU核心,可以同时执行多个线程.利用硬件的特性,使用并行化代码以在多个处理器之间分配工作. 应用场景 文件批量上传 并行上传单个文件.也可以把一个文件拆成几段分开 ...

  6. Django后端彻底解决跨域问题

    最近在接一个前后端分离的项目,后端使用的django-restframework,前端使用的Vue.后端跑起来后,发现前端在访问后端API时出了了跨域的问题. 类似如下报错: 关于跨域问题,之前这篇文 ...

  7. item 2: 理解auto类型的推导

    本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 如果你已经读过item 1的模板类型推导,你已经知道大部分关于au ...

  8. LeetCode之Add Two Numbers

    Add Two Numbers 方法一: 考虑到有进位的问题,首先想到的思路是: 先分位求总和得到 totalsum,然后再将totalsum按位拆分转成链表: ListNode* addTwoNum ...

  9. DevOps知识地图实践指南

    DevOps知识地图   DevOps方法论的主要来源是Agile, Lean 和TOC, 独创的方法论是持续交付. DevOps经典图书: * <DevOps实践指南> * <持续 ...

  10. C_数据结构_循环实现求阶乘

    # include <stdio.h> int main(void) { int val; printf("请输入一个数字:"); printf("val = ...