`

当在搜索框中未输入内容时显示“请输入”,按下鼠标后自动清空

阅读更多

     对于一个人性化的输入框,当没有输入搜索内容是,搜索框中将显示“请输入搜索内容”

    当将鼠标按到输入框是,该内容应当消失


 

  如果输入了搜索内容,该输入框将显示输入的内容


     否则,当鼠标离开输入框是,该输入框将仍然显示“请输入搜索内容”
    具体JS的实现代码如下:

  

  <input type="text" value="请输入搜索内容" style="color:gray;" 
	onfocus="javascript:if(this.value == '请输入搜索内容') 
	this.value = ''; this.style.color='black';"
	onblur="if(this.value == '') {this.value = '请输入搜索内容'; 
	this.style.color = 'gray';}">

 

  • 大小: 576 Bytes
  • 大小: 213 Bytes
  • 大小: 458 Bytes
分享到:
评论
4 楼 kongda2008 2011-02-11  
以前也用过 省的查文档了  多谢楼主
3 楼 liuxinglanyue 2011-02-03  
<p>刚刚用了下,谢谢啦。</p>
<p> </p>
<p><a href="http://www.liuxinglanyue.com/" target="_blank">http://www.liuxinglanyue.com/</a></p>
2 楼 mybreeze77 2010-05-13  
不错,很实用的方法
1 楼 T我们的爱T 2010-05-08  
很有收获~~谢谢您了~~

相关推荐

    jQuery搜索框删除文字代码

    // 当搜索框有内容时显示清除按钮 $searchInput.on('input', function() { if ($(this).val()) { $clearSearch.show(); } else { $clearSearch.hide(); } }); // 点击清除按钮,清空搜索框 $clearSearch....

    axure 不同搜索项输入框中的提示消失与显示

    提示文字通常是默认显示在文本框内的文本,当用户开始输入时应自动消失,以便显示用户的输入内容。 要实现这一功能,我们可以利用Axure的动态面板(Dynamic Panel)和状态(States)特性。动态面板可以模拟不同的UI...

    易语言源码超级编辑框和超级列表框联动输入.7z

    在许多用户界面设计中,这两者之间的联动是非常常见的需求,比如当用户在超级编辑框中输入内容时,超级列表框会根据输入内容实时过滤并显示匹配项。 要实现这个功能,首先你需要了解易语言中的事件驱动编程模型。...

    搜索框searchfield

    在本案例中,"搜索框searchfield"似乎是一个具有特定特性的实现,特别是它支持用户在输入后在框下方实时显示匹配结果,并且用户可以通过键盘的上下箭头来浏览这些结果,这提高了交互性和用户体验。 首先,我们来...

    jquery搜索提示插件输入文字搜索下拉框检索功能

    例如,当鼠标悬停在列表项上时,可以高亮显示;当点击列表项时,可以自动填充到输入框并关闭下拉框。 ```css #searchSuggestions { display: none; /* 默认隐藏 */ position: absolute; background-color: ...

    jQuery拉伸搜索框网页特效

    为了提高用户体验,我们还可以添加其他功能,如自动聚焦和清空搜索框内容。当用户点击搜索框时,搜索框自动获得焦点,允许用户立即输入;点击清除按钮时,搜索框内容清空。 ```javascript // 添加自动聚焦 $("#...

    下拉列表框自动补全,高亮显示所需js和css

    为了提升用户体验,开发者常常会为下拉列表框添加自动补全(Autocomplete)功能,使得用户在输入时能够快速找到并选择所需的选项,就像百度搜索引擎那样实现关键词高亮显示。这种功能通常结合JavaScript(js)和...

    jQuery仿百度搜索框下拉热门关键词列表代码.zip

    当用户在搜索框中输入时,触发相关函数处理数据: ```javascript $('#searchInput').on('keyup', function() { var keyword = $(this).val(); // 这里处理数据并更新下拉列表 }); ``` 核心知识点4:模拟下拉列表 ...

    c# 自定义TextBox 模糊匹配 百度 谷歌搜索框效果

    在C#编程中,自定义控件是一种常见的需求,特别是在创建具有特定功能或视觉效果的用户界面时。本文将深入探讨如何实现一个类似百度或谷歌搜索框效果的自定义TextBox,具备模糊匹配功能和圆角设计。 首先,我们需要...

    jquery输入框提示插件input输入框文字下拉提示添加标签代码

    6. **添加标签功能**:如果需要在输入框中添加标签,可以在用户选择提示项后,将其转换为标签形式(例如使用 `&lt;span&gt;` 元素)并添加到输入框前面,同时清空输入框内容,允许用户继续输入。 ```javascript function ...

    winform下TextBox自动提示功能

    为了提升用户体验,我们常常需要实现一个自动提示(Auto-Suggest或Auto-Complete)的功能,当用户在TextBox中输入文字时,系统会根据已有的数据集自动显示匹配的建议信息。这种功能常见于搜索框、地址栏等场景,能够...

    SecrchLineEdit

    对于自定义搜索框,可能需要处理特定的键盘和鼠标事件,例如按下回车键触发搜索,或者右键点击清除按钮弹出上下文菜单。 为了实现以上功能,我们需要编写Qt的C++代码或使用Qt Designer来布局界面,并进行相应的...

    文本框提示插件

    文本框提示插件是一种常见的前端交互元素,它用于在用户在文本框中输入内容时提供相关的建议或自动完成选项。这种插件广泛应用于各种Web应用,如搜索引擎、表单填写等,可以提升用户体验,减少输入错误,提高输入...

    人工智能-项目实践-搜索引擎-实现仿搜索引擎文本框自动补全Jquery插件

    在实现自动补全功能时,Jquery提供了一种高效且简洁的方式来监听用户在搜索框中的输入,以及在输入发生变化时触发相应的响应。 要创建这个功能,我们需要遵循以下步骤: 1. **HTML结构**:设置一个`&lt;input&gt;`元素...

    光标事件/自动补全内容

    当用户将鼠标焦点移动到输入框上,`focus`事件会被触发,这通常伴随着输入框边框的高亮显示,提示用户可以在此输入。相反,当焦点离开输入框时,`blur`事件会被调用。`mousemove`和`mouseout`则用于处理鼠标在输入框...

    使用JavaScrip模拟实现仿京东搜索框功能

    1. 当鼠标焦点进入搜索框时,`onfocus` 事件被触发,此时默认内容(例如"iphone 11")会消失,同时搜索框内的文本颜色变为黑色。这通过检查输入框的值是否等于默认关键词并清空其内容来实现。 2. 用户在输入后,...

    Win7资源管理器中不要存我的搜索记录OK否.docx

    4. **修改设置**:在右侧列表中找到“在Windows资源管理器搜索框中关闭最近搜索项目的显示”,双击该项。 5. **启用设置**:将设置从“未配置”更改为“已启用”,然后点击“确认”按钮完成设置。 6. **验证效果**:...

    web测试最全的功能测试范例.pdf

    - 清空搜索框:焦点进入搜索框时,应自动清除已有内容。 - 回车监听:输入后按下回车键应能执行搜索。 - 输入限制:测试输入过长字符、空格或无效条件的搜索情况。 - 条件查询:验证下拉框选择的条件是否正确...

    Excel使用技巧大全(超全)

    27. **在Excel中快速插入Word表格**:复制Word表格内容后,粘贴到Excel中。 28. **设置单元格字体**:选中单元格后,在“开始”选项卡下的“字体”组中设置。 29. **在一个单元格中显示多行文字**:使用`Alt + ...

Global site tag (gtag.js) - Google Analytics