WordPress 搜索框添加文字提示的方法


当前第2页 返回上一页

(3) 如果搜索栏还提供一个提交按钮, 那么在点击提交按钮的时候也要对搜索框内容进行检测, 如果是提示信息, 则不进行搜索.

用 JavaScript 实现搜索框提示信息

下面是我在自用的 iNove 主题上添加提示信息的 jQuery 代码, 请留意代码注释.

代码如下:

jQuery(document).ready(
function(){
// 当鼠标聚焦在搜索框
jQuery('#searchbox .textfield').focus(
function() {
// 如果搜索框的内容是 "Type text to search here...", 文字颜色变深, 内容清空.
if(jQuery(this).val() == 'Type text to search here...') {
jQuery(this).css({color:"#555"}).val('');
}
}
// 当鼠标在搜索框失去焦点
).blur(
function(){
// 如果搜索框的内容是空, 则文字颜色变浅, 显示 "Type text to search here..." 字样.
if(jQuery(this).val() == '') {
jQuery(this).css({color:"#999"}).val('Type text to search here...');
}
}
);
// 当点击搜索按钮时
jQuery('#searchbox .button').click(
function() {
// 如果搜索框内容是 "Type text to search here..." 或者是空, 不进行任何操作.
if(jQuery('#searchbox .textfield').val() == '' || jQuery('#searchbox .textfield').val() == 'Type text to search here...') {
return false;
// 否则提交并进行搜索
} else {
jQuery(this).submit();
}
}
);
// DOM 加载完毕时发生的事件
jQuery(
function() {
// 如果搜索框内容是 "Type text to search here..." 或者是空, 文字颜色变浅, 显示 "Type text to search here..." 字样.
if(jQuery('#searchbox .textfield').val() == '' || jQuery('#searchbox .textfield').val() == 'Type text to search here...') {
jQuery('#searchbox .textfield').css({color:"#999"}).val('Type text to search here...');
}
}
);
}
)

原理很简单, 用纯 JS 实现只是为了维护方便, 你可以选择其他方法. 我并没有在发布的主题中添加这个功能是因为 JS 实现的代码做不了国际化, 实在有点尴尬. 如果你真的喜欢, 可以自己尝试实现一下.


标签:WordPress

返回前面的内容

相关阅读 >>

wordpress文章摘要小记

php修改word的实例方法

详解wordpress中调用评论模板和循环输出评论的php函数

教你实现wordpress博客的“预加载”功能

wordpress调用当前分类下子分类的方法

wordpress源代码中文乱码的解决方法

忘记wordpress的登录密码的解决方法(比较简单)

upupw 更新 64 位 apache 系列 php 7.0 正式版

wordpress教程防wordpress广告的方法 评论中包含过多链接不可提交

wordpress更换主域名后需要的操作分享

更多相关阅读请进入《wordpress》频道 >>



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...