我试图在td,p上使用blur
,但没有成功。jQuery文档说
"最初,此事件仅适用于表单元素,例如输入在最近的浏览器中,事件的域已经扩展以包括所有元素类型"
所以它应该在p/td标签上启动。这是我的示例代码:
<p>Test 2
</p>
<p>Test 1
</p>
<script>
$(document).ready(function () {
$("p").blur(function () {
alert('blur');
});
});
</script>
但是,请注意,如果我尝试用程序调用blur,它就会被触发。
$("p").blur();
我假设当我点击第一个p,然后点击其他任何地方时,模糊应该会触发。。。我是不是遗漏了什么?
将tabindex
属性添加到您的p标签,在选项卡或单击后将触发模糊,例如
<p tabindex="10">test 1</p>
<p tabindex="11">test 2</p>
focusout事件:http://jsfiddle.net/b98Bs/
模糊事件:http://jsfiddle.net/b98Bs/1/
(如果你点击p,记得点击后远离它以触发事件)
更新:
我已经包含了第二个jsfiddle来显示模糊,以及focusout,事件也会触发一个警报,显示正在失去焦点的p元素的文本。
如果您希望tabindex遵循文档中元素的顺序,请将它们都设置为tabindex="0":http://jsfiddle.net/b98Bs/2/
模糊事件不适用于像p这样的元素。它通常用于输入文本。如果你聚焦,你可以触发事件"聚焦",当焦点不在时,它就是模糊事件。您可以在那里使用模糊事件。模糊事件表示失去焦点。在下面的例子中,当焦点不在时,输入文本的颜色变为红色。当焦点聚焦时,颜色变为黄色。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#blurr").blur(function(){
$(this).css("color","yellow");
});
$("#blurr").focus(function(){
$("#blurr").css("color","red");
});
});
</script>
</head>
<body>
<input type="text" id="blurr" value="click Here"/>
</body>
</html>