最近文囧啊,所以没办法把我的课程设计都拿出来凑数了。今天再和大家分享一个比较不错的东西,如题所示。我以前曾经写过为WP评论窗口背景图,其实那个也不是只针对wp的,这一次还不只针对wp了,这一次也要针对所有的网页了,嘿嘿。效果大家可以参看我的logo栏右侧的搜索框和我的评论文字输入框,当点击后会自动消失文字。不过这对于高手应该不是问题了,但是还是折腾了我好久。

本文不是转载了,那就算是伪原创了,呵呵。相关代码是我从我现在用的WPSummer主题和柴鸡不柴的Gbary主题中提取的。

首先您要确定你的主题的搜索框和评论论框的id,具体分别在主题searchform.php和comments.php中,前者可能很多不同,我的是"ls",但是后者应该都是"comment".

然后在主题的js文件中加入下列代码(注意js文件的编码格式,不然会生成乱码):

//SearchForm
$(document).ready(function(){
// 当鼠标聚焦在搜索框
if($('#ls').val()==""){
$('#ls').val('搜索关键字').css({color:"#787878"});
}
$('#ls').focus(
function() {
if($(this).val() == '搜索关键字') {
$(this).val('').css({color:"#222"});
}
}
// 当鼠标在搜索框失去焦点
).blur(
function(){
if($(this).val() == '') {
$(this).val('搜索关键字').css({color:"#787878"});
}
}
);
});
//Comments
$(document).ready(function(){
// 当鼠标聚焦
if($('#comment').val()==""){
$('#comment').val('添加评论内容').css({color:"#454545"});}
$('#comment').focus(
function() {
if($(this).val() == '添加评论内容') {
$(this).val('').css({color:"#222"});
}
}
// 当鼠标失去焦点
).blur(
function(){
if($(this).val() == '') {
$(this).val('添加评论内容').css({color:"#454545"});
}
}
);
});

如果你的主题没有包含js,那么可以放在header中,用<script >包起来,即:

<script type="text/javascript" charset="utf-8">//上边的代码</script >

注意:如果你也是用的和奚少类似的表情符的话,那么上边代码要进行变更,不然会出现当没输入文字直接点击表情后表情前加上了"添加评论内容"几个字。

更改办法是删除当鼠标失去焦点的代码,即:

//Comments
$(document).ready(function(){
// 当鼠标聚焦
if($('#comment').val()==""){
$('#comment').val('添加评论内容').css({color:"#454545"});}
$('#comment').focus(
function() {
if($(this).val() == '添加评论内容') {
$(this).val('').css({color:"#222"});
}
}
);
});

好了,以后没事就可以点着完了,嘿嘿。

今天终于意识到,整天一直这么折腾下去也不是个事啊。平时无聊了折腾一两下还可以,这放假了我倒是一整天都在这样瞎折腾,到现在还没吃午饭呢。不行,是该收手了。以后就很少折腾了,除非无聊的时候只当消遣,多吧精力花在考研准备上吧!英语是个软肋,如果有朋友在这方面有经验的话,还望赐教哦!小弟不胜感激!

37,378
更新日期: 2011-01-13
文章标签: ,
文章链接: http://www.xishao.net/wp/567.html
站方声明: 除特别标注, 本站所有文章均为原创, 互联分享, 尊重版权, 转载请注明.