• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
123456881 显示全部楼层 发表于 2021-8-15 19:38:03 |阅读模式 打印 上一主题 下一主题
如在 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 实现的代码做不了国际化, 着实有点尴尬. 假如你真的喜欢, 可以本身实验实现一下.

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作