单击查询清除输入字段
我在 Jquery http://jsfiddle.net/anderskitson/AtqHm/ 上找到了这个 jsfiddle 代码在 jsfiddle 上很好，但是当我尝试在 html 文件中实现它时，它不起作用。我将其托管在 http://anderskitson.ca/tests/javascript/clearOnHover.html 我不知道为什么它不起作用，这是非常基本的设置。任何帮助将不胜感激。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rat Recipes</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
<div id="form">
<form method="post">
<input type="text" class="class-11" value="Enter Choice #11">
<input type="text" class="class-21" value="Enter Choice #21">
<input name="submit" type="submit" id="submit" class="submit button" value="Send feedback" />
</form>
<script>
$(document).ready(function() {
var default_val = '';
$('input[class^="class-"]').focus(function() {
if($(this).val() == $(this).data('default_val') || !$(this).data('default_val')) {
$(this).data('default_val', $(this).val());
$(this).val('');
}
});
$('input[class^="class-"]').blur(function() {
if ($(this).val() == '') $(this).val($(this).data('default_val'));
});
});
</script>
</body>
</html>
I have found this jsfiddle code on Jquery http://jsfiddle.net/anderskitson/AtqHm/ it works fine on jsfiddle, however when I try and implement it in a html file it doesn't work. I have it hosted at http://anderskitson.ca/tests/javascript/clearOnHover.html I am not sure why its not working it is pretty basic setup. Any help would be greatly appreciated.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rat Recipes</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
</head>
<body>
<div id="form">
<form method="post">
<input type="text" class="class-11" value="Enter Choice #11">
<input type="text" class="class-21" value="Enter Choice #21">
<input name="submit" type="submit" id="submit" class="submit button" value="Send feedback" />
</form>
<script>
$(document).ready(function() {
var default_val = '';
$('input[class^="class-"]').focus(function() {
if($(this).val() == $(this).data('default_val') || !$(this).data('default_val')) {
$(this).data('default_val', $(this).val());
$(this).val('');
}
});
$('input[class^="class-"]').blur(function() {
if ($(this).val() == '') $(this).val($(this).data('default_val'));
});
});
</script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
看起来在 read() 函数的末尾有一些无法识别的字符，这些字符没有出现在上面的代码片段中。当我将代码复制/粘贴到 Notepad++ 中时，我看到一个“？”特点。删除会使代码正常运行
It looks like you have some unrecognized character at the end of the ready() function that isn't appearing in the snippet above. When I copy/paste your code into Notepad++ I see a "?" character. Removing that causes the code to function properly
我在 Chrome 中的第 29 行收到一个错误，这表明由于某种原因，野外浏览器对于最后的 if 语句中缺少大括号不太宽容。尝试：
I'm getting an error in Chrome on line 29, which suggests to me that for some reason browser(s) in the wild are being less forgiving about your lack of curly braces on the final if statement. Try: