jquery文本框获得焦点与文本框失去焦点综合实例_jquery文本框

当前位置：首页 > 脚本编程 > jquery > jquery文本框 > 正文

jquery文本框获得焦点与文本框失去焦点综合实例: 发布时间：2020-04-14编辑：脚本学堂

jquery实现文本框获得焦点与失去焦点的方法，文本框获得焦点和失去焦点的判断代码，对于元素的焦点事件，可以使用jQuery的焦点函数focus(),blur()。

jquery实现文本框获得焦点和失去焦点的判断代码

当点击按钮“添加空格”时，会在原来的内容的基础上加上空格，不过这时文本框已经失去焦点了，需要通过focus（）函数使其，在插入空格的位置上再次获得光标。

复制代码代码示例:

$("#insert_blank").click(function()

{

var temp=$("#blank_qustion_content").val();

temp=temp+"______";

$("#blank_qustion_content").val(temp);

//插入完空格时，文本框再次获得焦点

$("#blank_qustion_content").focus();

})

文本框获得焦点和失去焦点的两种方法

文本框失去焦点事件、获得焦点事件

onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
Onchange:当文字值改变时，产生该事件
Onselect:当文字加亮后，产生该文件
onpropertychange 当属性改变发生该事件

无论粘贴 keyup onchange等，最为敏感

先来看javascript的直接写在了input上

对于元素的焦点事件，可以使用jQuery的焦点函数focus(),blur()。
focus()：得到焦点时使用，和javascript中的onfocus使用方法相同。
如：

$("p").focus(); 或$("p").focus(fn)

blur()：失去焦点时使用，和onblur一样。
如：

$("p").blur(); 或$("p").blur(fn)

例子：

<form>
<label for="searchKey" id="lbSearch">搜神马？</label> 这里label覆盖在文本框上，可以更好的控制样式
<input id="searchKey" type="text" />
<input type="submit" value="搜索" />
</form>

jquery代码

复制代码代码示例:

$(function() {

$('#searchKey').focus(function() {

$('#lbSearch').text('');

});

$('#searchKey').blur(function() {

var str = $(this).val();

str = $.trim(str);

if(str == '')

$('#lbSearch').text('搜神马？');

});

})

例子：

复制代码代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery文本框焦点获得与失去_www.jb200.com</title>
</head>
<script>
function tt(){
var i=document.form1.text1.value;

if(i.length>=6)
document.getElementById("s1").innerHTML="用户名不能大于6位";
else
document.getElementById("s1").innerHTML="";
}
function a(){
var j=document.form1.text2.value;
if(j.length>=6)
document.getElementById("s2").innerHTML="密码不能大于6位"
else
document.getElementById("s2").innerHTML="";
}
</script>
<body>
<form name="form1">
用户名：<input type="text" id="text1" value="请输入用户名" onfocus="javascript:document.form1.text1.value=''" onblur="tt()"/>
<span id="s1"></span><br />
密码:<input type="text" id="text2" value="请输入密码" onfocus="javascript:document.form1.text2.value=''" onblur="a()"/>
<span id="s2"></span><br />
<input type="button" id="button" value="登陆" />
</form>
</body>
</html>

jQuery方法

原理：让表单的val值等于其title值。
代码：

复制代码代码示例:

文本框获得焦点、失去焦点调用javascript

复制代码代码示例:

<%@ Page Language="VB" CodeFile="focus.aspx.vb" Inherits="focus" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 

<head runat="server"> 

<title>文本框获得焦点与失去焦点 - www.jb200.com</title> 

<script language="javascript"> 

function text1_onmouseover(it) 

{ 

it.focus(); 

it.select(); 

it.style.backgroundColor="red"; 

} 

function text1_onmouseout(it) 

{ 

it.onblur; 

it.style.backgroundColor="white"; 

} 

</script> 

</head> 

<body> 

<form id="form1" runat="server"> 

<div> 

<asp:TextBox ID="TextBox1" onmouseover="return text1_onmouseover(this);" onblur="text1_onmouseout(this)" runat="server"></asp:TextBox> 

</div> 

</form> 

</body> 

</html>

您可能感兴趣的文章：

上一篇：jquery下拉框赋值，jquery dropdownlist取值赋值方法汇总
下一篇：jquery文本框样式设置，jquery文本框获得和失去焦点

与 jquery文本框获得焦点与文本框失去焦点综合实例有关的文章

本文标题：jquery文本框获得焦点与文本框失去焦点综合实例
本页链接：http://www.jb200.com/article/30842.html

浏览排行

栏目分类

热点文章

jquery文本框获得焦点与文本框失去焦点综合实例