WordPress 搜寻框增加文字提醒的办法

如在 Nicky 的博客中, 我发现了下图中的搜寻栏.

在搜寻栏中增加这样的提醒信息, 能够疏导访客对网站进行搜寻, 对技术类, 分享类网站尤其无效.

为了放弃良好的用户体验, 咱们普通会在搜寻之后保存上次搜寻的要害字, 如下图是搜寻 'WordPress' 要害字之后搜寻栏的形态.

对于搜寻框,我以为有以下几点需求留意

(1) 在建设搜寻框的时分, value 的值应该是要害字传值, 而不是搜寻栏提醒. 或者你会说, 很多人都将提醒作为搜寻栏的初始内容, 但我以为是不好的. 而 Google 和百度都是将上次搜寻的要害字作为搜寻栏初始化内容的. 所以我倡议在无关键字的时分显示要害字, 没要害字的时分显示提醒.

(2) 假如输出框没无关键字内容, 当鼠标点击搜寻输出框的时分, 咱们要让提醒信息隐没; 而当鼠标分开输出框时, 从新显示提醒. 这就要求对输出信息进行判别, 如何判别? 最简略的办法是比照字符串, 所以这要求咱们用一些不罕用的文字串作为提醒, 切记应用 "Search" 和 "搜寻" 这些可能成为要害字的文字串作为提醒.

(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 搜索框 文字提示
版权声明:本文为 安达网络工作室 转载文章,如有侵权请联系我们及时删除。
相关文章
the_time WordPress日期和工夫调用函数

复制代码代码如下: <?php the_time('Y-m-d'); ?> 显示的是 2011-10-1 这样的,修正()中内容用以下字符交换...

WordPress中登陆后封闭登陆页面及设置用户不可见栏目

用户登录后封闭登录页面 WordPress默许的登录页面是:http://WP目录/wp-login.php,登录后会主动跳转到:ht...

wp-Syntax wordpress高亮插件应用办法

首先简略理解下 wp-Syntax 插件,wp-Syntax 是一个针对wordpress的代码高亮插件,最大的优点是简略易用,兼...

WordPress中邮件的一些修正和自定义技巧

更改邮件内容类型为 HTML 在 WordPress 中发送邮件需求应用 wp_mail() 函数,然而邮件内容默许的类型却是“...

进步功能!五种WordPress避免渣滓评论办法

WordPress貌似和渣滓评论是一对&ldquo;孪生兄弟&rdquo;,无论在国际还是国外的空间主机上搭建的Wordpress博...

WordPress配置文件wp-config.php详解

明天装置一个wp主题时分突然前后盾都报错,这就完了,只能去效劳器上修正顺序或许修正配置了,正好搜寻到一...

需求提交

客服服务