这是我第一次使用jQuery,我很难理解如何在我的网站上实现它,尽管这是一项相对容易的任务。
我的目标是修改我网站上现有的文本区域,使其显示默认消息,当客户点击文本区域输入信息时,该消息就会消失。最初我只是想使用html占位符属性,但由于某些原因,它不起作用。。(我正在使用IE 8)。所以现在我正在尝试使用这个jQuery代码,这是建议给我的
这是代码:
<textarea style="background: #F6E3CE; overflow:auto;" rows="3" cols="70" name="sComments" id="sComments"
<script type="text/javascript"><?php
$("input#text").focus(function(){
if( $(this).val() == "default message" )
{
$(this).val("");
}
}).blur(function(){
if( $(this).val() == "" )
{
$(this).val("default message");
}
}); ?>
</script>
onchange="commentsChanged(this,<?php echo $pKey;?>);"><?php echo str_replace(''r'n', "'n", rtrim($variable1[0][aComments]));?></textarea>
如果我理解正确的话,我在代码开头引用了jQuery文件,如下所示:
<script language="JavaScript" src="../js/jquery-1.6.4.js"></script>
在最近的一次尝试中,该网站的这一部分甚至无法打开。在做了一些研究之后,我仍然不确定自己做错了什么。
谢谢。
编辑:下面的两个答案都很好,效果很好。Tenhouse的更"恰当",因为它将逻辑和格式分离,但Chandrakant对内联JavaScript的使用同样有效,实际上也是我在网站上使用的。
首先,您将PHP
代码和JavaScript
代码混合在一起,这将不起作用,因为它们没有直接关系。
其次,您必须将focus / blur -listeners
放在document ready
函数中(这意味着它将在加载文档时加载)。
第三,我强烈建议您阅读一些关于jQuery的基础知识——您可以从以下内容开始:http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
编辑:由于你似乎真的对一切都很困惑,这里有一个完整的例子:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var defaultMessage = "default message";
$("#myTextArea").focus(function(){
if( $(this).val() == defaultMessage){
$(this).val("");
}
}).blur(function(){
if( $(this).val() == "" ){
$(this).val(defaultMessage);
}
}).val(defaultMessage);
});
</script>
</head>
<body>
<textarea id="myTextArea"></textarea>
</body>
</html>
在上面的例子中,您还可以看到我直接从他们的服务器上使用了一个更新的jQuery版本。
Chandrakant的另一个答案:
我不同意将JavaScript部分直接放入元素中。这不是一个好的做法,因为你应该总是尝试拆分逻辑&格式化。
无需使用jQuery,如果您仍然对使用jQuery感兴趣,请使用以下逻辑
<input type="text" value="your text" onfocus="if (this.value == 'your text') {this.value = '';}" onblur="if (this.value == '') {this.value = 'your text';}">