`
单刀刑天
  • 浏览: 40162 次
文章分类
社区版块
存档分类
最新评论

搜索输入框文字的消失

阅读更多
当鼠标获得焦点、失去焦点的时候,input输入框文字处理:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("input.text1").val("请输入搜索信息");
				textFill($("input.text1"));
			});
			function textFill(input){
				var originalvalue = input.val();
				input.focus(function(){
					if($.trim(input.val()) == originalvalue){
						input.val("");
					}
				});
				input.blur( function(){
	        		if( $.trim(input.val()) == ""){
	        			input.val(originalvalue);
	        		}
	    		});  
			}
		</script>
	</head>
	
	<body>
		<input class="text1" style="color:#D7D7D7"/><input type="button" value="百度一下">
	</body>
	
</html>
分享到:
评论

相关推荐

    js实现input文本框点击时文字消失,失去焦点时文字出现

    在JavaScript编程中,有时我们需要为输入框(input)设置一种特殊的行为,比如当用户点击输入框时,预设的文字消失,而当用户离开输入框(失去焦点)时,这些文字又重新出现。这种功能常见于搜索框或者密码输入等...

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

    本文将深入探讨如何在Axure中处理不同搜索项输入框中的提示文字,使其在用户操作时正确地消失和显示。 首先,我们要理解搜索项输入框的基本结构。在Axure中,一个搜索输入框通常由一个文本框(Text Input)组件和...

    安卓键盘输入相关-仿今日头条进行点击弹出输入框输入法弹起。按返回键输入框和输入法同时消失。并且监听输入法随输入框消失而消失.rar

    这个压缩包文件中的示例代码主要展示了如何模仿今日头条应用实现一个点击弹出输入框并自动弹起输入法的功能,以及如何在用户按下返回键时,使输入框和输入法同时消失,并监听输入法的状态变化。 首先,我们要理解...

    淘宝搜索框(和淘宝网页的输入框一样的效果).zip

    和淘宝网页的输入框一模一样的效果,在输入框输入文字的时候(不是鼠标聚焦和点击的时候),默认图标放大镜和默认文字消失,在输入框没有输入文字但焦点还在的时候,默认图标和默认文字出现

    html带图标输入框 适合手机端

    `placeholder`属性定义了输入框内预显示的提示文字,当用户点击输入框时,提示文字会消失。 为了在输入框前面添加图标,我们可以使用HTML5的`&lt;label&gt;`标签配合`&lt;input&gt;`元素,再借助CSS来实现。例如,我们可以这样...

    仿百度输入框显示搜索内容

    在IT行业中,创建一个仿百度输入框显示搜索内容的功能是一项常见的前端开发任务,它涉及到用户界面(UI)设计和交互的优化,以提供良好的用户体验。这个功能的核心是文本框(TextBox),一个允许用户输入文本的HTML...

    jQuery实用小技巧_输入框文字获取和失去焦点的简单实例

    在本文中,我们将深入探讨jQuery中的实用小技巧,特别是关于输入框文字的获取和失去焦点时的处理。这个实例展示了如何在用户与输入框交互时动态改变文本内容,以提供更好的用户体验。 首先,我们看到HTML代码包含了...

    删除输入框的文字

    本Demo主要展示了如何实现在文本框(EditText)中动态地清除文字,并且在这个过程中,图片能够随着文字的消失而进行相应的显示或隐藏。这个功能在许多应用中都有所应用,比如搜索框的清空功能。 首先,我们来看如何...

    html5配合css3实现带提示文字的输入框(摆脱js)

    这里的`placeholder`属性值“用户名或邮件地址”会在输入框内显示,当用户聚焦或开始输入时,该提示文字会自动消失,为用户提供输入空间。 然而,为了使提示文字在聚焦或悬停时改变颜色或实现其他视觉效果,我们...

    设置搜索框的默认文字当鼠标单击时该默认文字消失

    通过这种方式,我们实现了搜索框默认文字的动态行为,即鼠标单击时默认文字消失,失去焦点且无输入时默认文字重现。这种方法在网页设计中很常见,可以提升用户的使用体验,因为它减少了用户不必要的操作步骤。

    javascript搜索框点击文字消失失焦时文本出现

    为了实现点击搜索框时提示文字消失,以及在失焦时文字重新出现的逻辑,我们需要对`input`元素添加事件监听器。在JavaScript中,`onfocus`事件会在元素获得焦点时触发,而`onblur`事件会在元素失去焦点时触发。 示例...

    文本框点击时文字消失,失去焦点时文字出现

    在实际应用中,这样的功能可以轻松应用于搜索框、用户名输入框、邮箱输入框等需要用户输入特定信息的场景。通过JavaScript的事件监听和DOM操作,我们可以灵活地控制网页元素的行为,提升用户体验。在编写这类代码时...

    jQuery实现的文本框输入文字后飞出消失动画效果源码.zip

    这个"jQuery实现的文本框输入文字后飞出消失动画效果源码.zip"压缩包文件,显然包含了一个特定的功能实现,即在用户在文本框(input[type="text"])中输入文字后,这些文字会以飞出消失的动画效果呈现。这种效果通常...

    jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例

    文章还暗示了在开发过程中,代码可能会经过扫描或识别,可能导致文字识别错误或漏识别。这意味着在开发中可能会遇到从其他文件或文本导入代码的情况,需要对导入的代码进行校验和调试,确保功能正常运行。 总体来说...

    Android 点击EditText编辑框清除hint预设字

    当用户开始输入时,这个提示文字通常会自动消失。然而,有些情况下,开发者可能希望用户在点击`EditText`时才清除`Hint`,以提供更友好的交互体验。本文将详细讲解如何在Android中实现这样一个功能。 首先,我们...

    淘宝搜索框.zip(含jquery1.12.4包代码)

    和淘宝网页的输入框一模一样的效果,在输入框输入文字的时候(不是鼠标聚焦和点击的时候),默认图标放大镜和默认文字消失,在输入框没有输入文字但焦点还在的时候,默认图标和默认文字出现

    腾讯网Web设计规范_V1.3

    “标示性文字” 可设置灰色(#cccccc)显示,点击输入框后提示文字消失。提示文字应简明扼要,文字一般用于内容、用途、搜索范围等对用户有真正帮助的提示,”请输入关键词”这样的提示不应出现.

    动态文字动画效果

    在“播放器的搜索界面效果”这个场景中,动态文字通常用于输入框的提示文字、搜索关键词的展示或者加载过程中的显示,以此吸引用户的注意力并提供反馈。 动态文字动画效果可以分为多种类型,例如淡入淡出、滑动、...

    HTML输入框优化以此来提高用户体验和易用度

    当用户开始在输入框中输入信息时,提示文字会自动消失,从而不会干扰用户的输入。这大大减少了用户对于输入内容的疑惑,并且能有效减少对占位提示文字的误点击。 为了实现上述效果,JavaScript代码起着不可或缺的...

Global site tag (gtag.js) - Google Analytics