页面内容: 文本框模拟键盘点击 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>
来源: http://www.bubuko.com/infodetail-2673365.html