JS通过键盘点击事件实现div移动
2024-10-13 17:43:02
页面内容:文本框模拟键盘点击 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>
最新文章
- 老司机学新平台 - Xamarin开发之我的第一个MvvmCross跨平台插件:SimpleAudioPlayer
- MicroERP如何配置网络应用
- 必须掌握的八个cmd 命令
- C#计算器代码
- DotNetBar v12.3.0.3 Fully Cracked
- MyBatis association的两种形式——MyBatis学习笔记之四
- IE浏览器中发送到onenote的选项没有调出来??
- PHP学习笔记一
- Oracle中使用透明网关链接到Sqlserver[Z]
- PHP - 验证用户名
- CentOS 6.8下二级域名及目录的绑定
- zookeeper初探
- 操作DataTable数据,修改某列的值
- windy数
- java提供的线程池的使用
- 1. ip正则表达式验证
- WCF 获取客户端IP
- QT之设计部件背景色
- 微信小程序如何获取屏幕宽度
- C语言标准函数源代码
热门文章
- Omi框架学习之旅 - 组件通讯(group-data通讯) 及原理说明
- Mysql windows版本的安装
- web service 框架
- CF1056E Check Transcription 字符串哈希
- JS-详解算数运算符";+";
- 一个有趣的问题——HTTP是“超文本传输协议”还是“超文本转移协议”
- BootStrap学习(4)_分页&;标签&;缩略图&;警告&;进度条
- windows服务中对外提供API接口
- nginx的access.log文件详解
- #个人博客作业Week3——必应词典案例分析