JS通过键盘点击事件实现div移动
Posted Sue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS通过键盘点击事件实现div移动相关的知识，希望对你有一定的参考价值。
页面内容：文本框模拟键盘点击 div元素实现移动；
<body> <textarea id="myarea" ti></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移动的主要内容，如果未能解决你的问题，请参考以下文章
JS——事件详情（键盘事件：keyCodectrlKey...）