`
linhui_dragon
  • 浏览: 155883 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

input失去焦点和获得焦点jquery焦点事件

 
阅读更多
input失去焦点和获得焦点jquery焦点事件

input失去焦点和获得焦点jquery焦点事件插件，
鼠标在搜索框中点击的时候里面的文字就消失了。

我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件，因为懒，每次都去写非常的烦，于是就一劳永逸，遇到类似情况就来调用一下就OK 了

相关js代码: 
<title>input失去焦点和获得焦点jquery焦点事件插件 - 懒人建站</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//focusblur
    jQuery.focusblur = function(focusid) {
var focusblurid = $(focusid);
var defval = focusblurid.val();
        focusblurid.focus(function(){
var thisval = $(this).val();
if(thisval==defval){
                $(this).val("");
            }
        });
        focusblurid.blur(function(){
var thisval = $(this).val();
if(thisval==""){
                $(this).val(defval);
            }
        });
        
    };
/*下面是调用方法*/
    $.focusblur("#searchkey");
});
</script>
</head>


第一种：
function addListener(element,e,fn){
	   if(element.addEventListener){
	  	 element.addEventListener(e,fn,false);
	   } else {
	  	 element.attachEvent("on" + e,fn);
	   }
	}
	
	var values = document.getElementById("searchkey");
	
	addListener(values,"click",function(){
		values.value = "";
	})
	
	addListener(values,"blur",function(){
 		if (values.value ==''){
 			values.value = "请输入用户名";
		}
	}) 

第二种：（有bug，输入名称后，鼠标离开，会显示“请输入用户名”）
//获得焦点
	function on_focus(){
		var val = document.getElementById("searchkey");
		if (val.value = "请输入用户名"){
			val.value = "";
		}else {
			val.value = val.value;
		}
	}
	//失去焦点
	function on_blur(){
		var val = document.getElementById("searchkey");
			val.value = "请输入用户名";
	}


<body>
<form action="" method="post">
  <!--  <input id="searchkey" class="search" type="search" name="s" value="请输入用户名" onBlur="on_blur();" onFocus="on_focus();" />-->
    <input id="searchkey" class="search" type="search" name="s" value="请输入用户名" />
</form>

</body>
</html>
分享到：
| html5 在IE6/IE7/IE8中使用html5标签
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery获取焦点和失去焦点事件代码

    input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面的文字就消失了。 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点...input失去焦点和获得焦点jquery焦点事件插件 – 懒人建站&lt;/title&gt; &lt;scrip

    在js(jquery)中获得文本框焦点和失去焦点的方法

    介绍两个方法和种是利用javascript onFocus onBlur来判断焦点和失去焦点，加一种是利用jquery $("p").blur(); 或$("p").blur(fn)来实现，有需要的朋友可以参考一下

    html文本框input表单输入框默认提示信息插件，获得焦点自动清空默认值，失去焦点对比确认默认值

    并可以指定input获得焦点和失去焦点的CSS样式 以下为参数说明 + 参数 @input 入参 json对象 @ dvalue input表单提示默认值 @ tip 默认提示信息样式名class @ tipnone 在指定的input执行click时替换的样式名...

    asp.net中TextBox获得焦点和失去焦点——客户端JavaScript事件

    当用户与TextBox交互时，我们有时需要在特定事件（如获得焦点或失去焦点）时执行一些功能，例如验证输入、更新界面或者提供反馈。本文将详细讨论如何利用客户端JavaScript事件来实现这些需求。 首先，我们要理解...

    input 输入框获得/失去焦点时隐藏/显示文字(jquery版)

    本文将讨论如何使用jQuery来实现一个常见的功能：当`input`输入框获得焦点时隐藏默认文字，失去焦点且未输入内容时恢复默认文字。 首先，传统的实现方式是在HTML标签中直接内联JavaScript事件处理函数，例如`...

    jQuery/JS监听input输入框值变化实例

    在本文中，我们将探讨如何使用jQuery和JavaScript来监听HTML input元素的值变化事件。文章首先介绍了input元素值变化的不同监听方法，并详细解释了每种方法的工作原理、适用场景以及可能遇到的问题。 首先，文章...

    方向键盘控制table内的input标签焦点

    2. **选中table内的所有input**：使用jQuery的选择器选取表格内的所有`&lt;input&gt;`元素，并为它们添加初始的焦点事件处理。 ```javascript $(document).ready(function() { var inputs = $('table input'); inputs....

    jQuery表单获取和失去焦点输入框提示效果

    总结起来，"jQuery表单获取和失去焦点输入框提示效果"是利用jQuery库来增强表单交互的一个实例，它通过监听和响应输入框的`focus`和`blur`事件，动态地改变提示信息，从而提供更直观的用户引导。这不仅提高了用户对...

    jquery实现input框获取焦点的方法

    总结以上，使用jQuery实现input框获取焦点的方法涉及了事件绑定、事件触发、以及DOM遍历和操作，这些操作使得我们能够为用户提供更直观的交互体验。在实际开发中，类似的技术会被广泛应用在表单处理、用户交互和数据...

    JQuery仿Div失去焦点和输入框切换的效果

    在实现Div失去焦点的效果时，可能会用到`:focus`伪类，当元素获得焦点时应用特定的样式，失去焦点时则移除这些样式。同时，`transition`属性可以添加平滑过渡效果，使样式变化更自然。此外，`box-shadow`、`border`...

    jQuery实现文本框获得焦点文字消失

    在这个特定的场景中，我们关注的是如何使用jQuery来实现一个功能：当文本框（input[type="text"]）获取焦点时，其预设的文字自动消失，而当失去焦点时，文字又能重新出现。这个功能常见于搜索框或表单输入，以引导...

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

    通过jQuery的`.each()`遍历所有`.input_txt`类的输入框，分别设置获取焦点和失去焦点时的事件处理。`for`属性在`&lt;label&gt;`标签中与`&lt;input&gt;`的`id`关联，使得点击`&lt;label&gt;`时`&lt;input&gt;`获取焦点。 此功能的实现利用了...

    jquery实现input框获取焦点的简单实例

    2. **选择器和DOM操作**：在事件处理函数中，`$(this)` 指代当前触发事件的元素，即获得或失去焦点的输入框。`closest` 方法用于找到离当前元素最近的匹配指定类名的祖先元素。在这个例子中，我们希望找到输入框的...

    jquery_input提示

    2. **事件绑定**：jQuery提供了`.focus()`和`.blur()`方法，分别用于在元素获得焦点和失去焦点时触发回调函数。在提示功能中，`.focus()`事件可能用来显示提示框，而`.blur()`则负责隐藏。 3. **DOM操作**：为了...

    JQ 文本框得到失去焦点

    本文将围绕“JQ文本框得到失去焦点”这一主题进行详细讲解，帮助开发者理解如何利用jQuery来监听文本框（input[type="text"]）的聚焦（focus）和失焦（blur）事件。 ### 一、jQuery基本概念 jQuery库通过$函数提供...

    jquery 强制设置文本框处于英文输入法状态

    总结来说，面对“jquery 强制设置文本框处于英文输入法状态”的问题，开发人员可以利用jQuery事件处理和JavaScript的特性来控制文本框的输入模式，确保在扫描枪或其他输入设备触发时，系统不会误切换到中文输入法。...

    jquery注册文本框获取焦点清空,失去焦点赋值的简单实例

    本文介绍了一个使用jQuery实现的简单实例，即在网页中通过注册文本框获取焦点时清空提示，失去焦点时如果没有输入，则重新显示提示信息的功能。在用户注册过程中，这常常被用来提示用户输入必须的信息，如账号、密码...

    jQuery input文本框点击下拉菜单选择代码

    在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果和Ajax交互。本文将详细讲解如何使用jQuery实现一个功能，即当用户点击input文本框时，弹出一个下拉菜单供用户选择。...

Magicbox
Global site tag (gtag.js) - Google Analytics