我想在焦点上更改html中文本框的颜色。但我的颜色并没有改变。!
HTML
<!DOCTYPE html>
<html>
<head>
<title>Make a new account</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js" type="text/javascript" ></script>
</head>
<body>
<h2 align="center" class="Heading">Want an account</h2>
<h3 align="center" class="Heading">Enter your details</h3>
<div align="center">
<form name="Info_Form">
<table>
<tr>
<td class="TD">Your Name Pal :</td> <td><input type="text" name="Name"></td>
</tr>
<tr>
<td class="TD">Your Password :</td> <td><input type="password" name="pwd"></td>
</tr>
<tr>
<td align="right" ><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
我的js文件:
$(document).ready(function(){
$('h2').fadeOut(3000);
$(".TD").focus(function(){
$(this).css("background-color","blue");
});
});
我做错了什么?
答案 0 :(得分:2)
这是因为您可以将.focus()
仅应用于有限数量的元素(链接,表单输入)。
焦点事件在获得焦点时发送到元素。这个事件 隐含地适用于有限的一组元素,例如形式 元素(,等)和链接()。在最近 在浏览器版本中,事件可以扩展为包含所有元素 通过显式设置元素的tabindex属性来定义类型。一个 element可以通过键盘命令获得焦点,例如Tab键,或 通过鼠标点击元素。
您尝试将其应用于<td>
代码。
此外,您的<input>
不是.TD
的孩子,因此这是您代码中的另一个问题。
为什么不简单地使用css :focus
选择器来实现这一目标?
答案 1 :(得分:2)
而不是:
$(".TD").focus(function(){
$(this).css("background-color","blue");
});
使用:
$("input").focus(function(){
$(this).css("background-color","blue");
});