Question

如何在JQuery中的箭头keydown事件上将元素水平移动10像素？比如我有

  <p class="move">This is to be moved</p>

我尝试了以下代码，但它不起作用..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery(2)</title>
<style type="text/css">
.Test1{width:100px;}
</style>
<script type="text/javascript"  src="jquery.js">  </script>
<script type="text/javascript">

$(document).ready(function() {


$('#target').keydown(function() {
  alert('Handler for .keydown() called.');
});

});
</script>

</head>

<body>


<div id="parent">
<p id="target">This is a text</p>
</div>
</body>
</html>

以上本应该在keydown事件中提醒我，但事实并非如此......我如何解决这个问题？换句话说，它不会捕获我的keydown事件..

Answer 1

一般情况下？您可以在其父级上处理keyDown事件。

例如：

http://jsfiddle.net/NXEU4/1/

如果没有更多信息，很难提供更详细的答案。

修改

您的代码无效，因为您的浏览器不允许<p>接收输入焦点，因此不会触发keyDown事件。

我提供的示例是移动一个绝对定位的元素。对于您的示例，您可以简单地增加margin-left样式。

<强> EDIT2

糟糕，也可能想要更新链接。

Answer 2

你真的希望#target成为一个输入。你不能在标准的html标签元素上进行技术上的“keydown”，它必须是能够具有主动“焦点”状态的东西，以便它能够监听键盘输入。你的

标签不知道什么时候有keydown动作，因为你不能对它应用一个。

<form>
  <input id="target" type="text" value="Hello there" />
</form>
<p id="moving_p">i can move when you key down in the input box above</p>

和你的剧本：

$(function() {
  $('#target').keydown(function() {
    $('#moving_p').animate({marginLeft:10+'px'});
  });
});

是否可以使用JQuery在keydown上移动元素？

2 个答案: