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

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

Searchbox in iBlue

搜索栏中添加这样的提示信息,可以引导访客对网站进行搜索,对技术类,分享类网站尤其有效.

为了保持良好的用户体验,我们一般会在搜索之后保留上次搜索的关键字,如下图是搜索 'wordpress' 关键字之后搜索栏的状态.

Searchbox in iNove

关于搜索框,我认为有以下几点需要注意

(1) 在建立搜索框的时候,value 的值应该是关键字传值,而不是搜索提示. 或许你会说,很多人都将提示作为搜索栏的初始内容,但我认为是不好的. 而 Google 和百度都是将上次搜索的关键字作为搜索栏初始化内容的. 所以我建议在有关键字的时候显示关键字,没关键字的时候显示提示.

(2) 如果输入框没有关键字内容,当鼠标点击搜索输入框的时候,我们要让提示信息消失; 而当鼠标离开输入框时,重新显示提示. 这就要求对输入信息进行判断,如何判断? 最简单的方法是对比字符串,所以这要求我们用一些不常用的文字串作为提示,切记使用 "Search" 和 "搜索" 这些可能成为关键字的文字串作为提示.

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

用 JavaScript 实现搜索提示信息

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

PHPcode1"> 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...'); } } ); } )

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


今天看到群友突然滴滴滴的找我QQ,好像出什么大事情一样。原来他由于误操作导致网站文章被删除。
今天遇到一个网友提示网站访问速度比较慢,然后通知日志看到有他的网站WordPress默认登录地址wp-login.php一直在被爬虫抓取,因为是有被破解后台账户信息,导致的占用数据库资源使得网站资源带宽不足后访问降低导致
今天老左在帮助客户升级WordPress的时候我看他网站也比较简单就直接在后台手工升级的。升级后打开网站有出现"There has been a critical error on your website."的错误提示。
我们在使用WordPress搭建的网站是否有留意查看源代码的时候看到标题中的原本"-",被转义成"&#8211"。其实这样并不影响用户阅读体验和搜索引擎,搜索引擎在收录后也会反向转义的。就是感觉看
WordPress默认是无法上传.webp格式的文件,如果要上传需要对上传文件限制进行解除后才能上传。
GTranslate 是一个流行的翻译插件,在免费和付费版本中提供不同的体验。 使用免费版本,您可以轻松提供任何语言的动态翻译,而付费版本提供可索引、可编辑的翻译版本,就像 Weglot 一样。
时下主流的浏览器都自带了广告屏蔽功能,还有ADSafe、ADB等软件插件,不断更新,屏蔽网站代码!
您是否正在寻找可用于显示数据的 WordPress 表格插件? WordPress 表格插件可让您以表格格式存储和呈现数据,以方便访问者阅读。
wordPress数据库除了本身的表以外,部分插件会增加表来存储数据。如果插件已经删除了,这些插件生成的表还在数据库中,那么怎么删除呢?
WordPress几乎是世界上最安全的开源程序,但其后台登录注册的地址始终是众所周知的,所以不少人觉得隐藏WordPress的登录地址后可能会更加安全。下面浩子就针对这个问题来简单说明一下方法。WordPress隐藏后台登录地址
自 WordPress 5.8 正式版发布 以后,后台的小工具就默认是块编辑器的界面样式,很多老用户还没有来得及学习就一脸茫然了,今天浩子就来教大家如何恢复WordPress经典小工具。
您想用您的语言翻译 WordPress 插件吗?许多 WordPress 插件是完全可翻译的,世界上任何人都可以轻松翻译。在本文中,我们将向您展示如何轻松地将 WordPress 插件翻译成您的语言(无需任何代码)。
WordPress新手不清楚WordPress调试模式怎么开启,今天来教大家认识和开启。什么是WordPress的调试模式
最近不少用户反馈说WordPress后台的外观-自定义点开后直接报错,错误信息如下:
前段时间迁移网站的时候,需要导入 sql 文件,小编用的是phpmyadmin管理工具,无论是从本地上传.sql.zip 文件,还是从网站服务器上文件夹 upload 下选择 sql 文件,都上传失败,皆以 502 Bad Gateway 告终。因为时间
WordPress程序报错的问题报错代码如下:This page contains the following errors:error on line 1 at column 6: XML declaration allowed only at the start of the documentBelow is a rendering of the page up t
DedeCMS织梦系统是国内的优秀开源建站系统,使用的网站数量众多,不过近期织梦也要开始收取授权费用了:除个人非盈利网站外,均需要购买DedeCMS商业使用授权,授权费为5800元。
WordPress生成XML站点地图的方法有很多,归纳总结一下,大致可以通过WordPress插件、在线生成软件或网站、PHP代码等三种方法实现,各有利弊,就看WordPress开发者怎么选择。
开发主题时使用了wordpress的缓存函数,如下所示代码,但是在打印缓存时,怎么显示的都是false,经过查找才了解到。默认情况下,对象缓存是非持久的。这意味着存储在缓存中的数据仅在请求期间驻留在内存中。除非您安装持久缓存插件,否则缓存数据不会在页面加载时持久存储。就这个意思,想持久就需要找个插件装上。function get_term_post($term_id){if($term_id &l
在 WordPress 主题和插件开发中,条件判断标签(Conditional Tags)是非常重要的,通过条件判断标签,我们可以判断各种情况,从而使用对应的代码等。例如在顶部导航条中有一个“首页”选项,在首页的时候需要设置成高亮,我们可以在头部导航模板文件(header.php)中使用条件判断标签 is_home() 来判断当前页面是不是首页,然后再输出高亮的 class。这类的条件判断标签一般