jQuery添加默认文本到搜索输入框

>使用jQuery增强您的搜索框：一个简单而有效的指南！本教程演示了如何在搜索框中添加默认文本，从而使其更加用户友好。 该解决方案确保默认文本在单击时消失，框为空时重新出现，并在悬停时提供视觉反馈。

>请参阅Live Demo

这是JavaScript代码：

$('#search').blur(function(){
    if (this.value == '') {
        this.value = 'Search BLOGOOLA';
    }
});

此jQuery代码使用blur>事件来检查用户与之交互后的搜索框是否为空。如果为空，它将设置默认文本。

> HTML结构（未详细显示）应简单地包含一个具有ID“搜索”的输入字段的表单。。

>下面的CSS样式提供了视觉增强：

#searchform { opacity:0.8 }
#searchform:hover { opacity:1.0 }
#searchform fieldset { border:0px; padding:0px; margin:0px; }
#searchform input { width:190px; height:16px; margin:0px 0px 0px 10px; padding:2px 5px 2px 5px; border-width:1px 1px 1px 1px; border-style:solid solid ridge solid; font-family:Arial, Helvetica, sans-serif; font-size:small; }
#searchform button{ float:right; width:30px; height:22px;  margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border-width:1px 1px 0px 1px; border-style:solid solid ridge solid; background-repeat:no-repeat; background-image:url('../images/search.png'); }
#searchform button:hover { cursor:pointer; background-color:#E2E2E2; }

>此CSS控制悬停的不透明度，删除默认表单样式，并为输入字段和搜索按钮设置尺寸和样式。>

>经常询问的问题（常见问题解答）添加默认文本以搜索输入

本节介绍有关将默认文本添加到搜索输入字段中的常见问题，涵盖了HTML和CSS方法。 原始的常见问题解答部分被保留，但为了清晰和简洁而改写。 包括有益的特定代码示例。

>

html占位符属性

>使用html

属性来添加默认文本的简单方法。 例如：

。 占位符文本将随着用户类型而消失。placeholder> 带有CSS <input type="search" placeholder="Enter search term...">的样式占位符文本

使用CSS控制占位符文本的颜色：

>此示例将占位符文本设置为红色。 请记住，浏览器对

的支持变化；您可能需要较旧浏览器的供应商前缀。

input::placeholder {
  color: red;
}

>默认文本的javascript::placeholder

>

属性通常就足够了，您可以使用JavaScript动态管理默认文本。 上面提供的jQuery示例就是一种这样的方法。

添加图标placeholder

>使用CSS的

和

>属性在搜索框中添加图标。

background-image>在焦点上扩展搜索框 background-position>在CSS中使用 pseudo-class在搜索框中获得焦点时展开搜索框：

>清除按钮样式

:focus造型内置的清除按钮需要由于伪元素的不同而需要特定于浏览器的CSS。 对于Webkit浏览器（Chrome，Safari），您可以使用：>

input[type="search"]:focus {
  width: 200px;
}

表格在Enter键

上提交

确保搜索框在

>元素内，以自动在按下Enter键时自动提交表单。

>页面上的自动对焦

>在页面加载时使用autofocus>元素上的<input>属性自动聚焦搜索框

以上是jQuery添加默认文本到搜索输入框的详细内容。更多信息请关注PHP中文网其他相关文章！