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

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

onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
Onchange:当文字值改变时，产生该事件
Onselect:当文字加亮后，产生该文件
onpropertychange 当属性改变发生该事件
无论粘贴 keyup onchange等，最为敏感

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

代码如下:

<input name="pwuser" type="text" id="pwuser"   class="input" value="楼盘账号"   onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号') this.value='';" />
<input name="pwpwd" type="password"    class="input1" value="******"  onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';">

jquery实现方法

对于元素的焦点事件，我们可以使用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>无标题文档</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>

第一种： html5

html5给表单文本框新增加了几个属性，比如：email,tel,number,time,required,autofocus,placeholder等等，这些属性给表单效果带来了极大的效果变化。
其中placeholder就是其中一个，它可以同时完成文本框获得焦点和失去焦点。必须保证input的value值为空， placeholder的内容就是我们在页面上看到的内容。
代码如下：


代码如下:

<input type="text" value="" placeholder="请输入内容" />

第二种： jQuery

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


代码如下:

<input type="text" value="" title="请输入内容" />

代码如下:

<script type="text/javascript">
$(function() {
var $input = $("input");
$input.each(function() {
var $title = $(this).attr("title");
$(this).val($title);
$(this).focus(function() {
if($(this).val() === $title) {
$(this).val('');
}
})
.blur(function() {
if($(this).val() === "") {
$(this).val($title);
}
});
});
});
</script>

文本框获得焦点、失去焦点调用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>无标题页</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>

赞 (0)

相关推荐

  • textarea焦点的用法实现获取焦点清空失去焦点提示效果

    textarea焦点的用法实现获取焦点清空失去焦点提示效果

    效果图: 具体实现: 1.textarea标签内容 复制代码 代码如下: <span style="font-size:14px;"><tr> <td align="right" valign="top">备注:</td> <td><textarea name="" id="remark" cols="" rows=&qu

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

    先来看javascript的直接写在了input上 复制代码 代码如下: <input name="pwuser" type="text" id="pwuser" class="input" value="楼盘账号" onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号')

  • jQuery 文本框得失焦点的简单实例

    版本一 css代码部分: 复制代码 代码如下: .focus {      border: 1px solid #f00;     background: #fcc;} 当焦点获得时,添加focus样式,添加边框,并改背景色为#fcc html代码部分: 复制代码 代码如下: <body>    <form action="" method="post" id="regForm">        <fieldset&

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

    在我们开发过程中特别是用户注册时会有一个效果,就是文本框获取焦点清空提示,如果用户没有输入信息失去焦点赋值上我们的提示语. <html> <head> <meta http-equiv="content-type"content="text/html; charset=UTF-8"/> <script src="http://127.0.0.1/jquery.js"></script>

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

    input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面的文字就消失了. 我们在做网站的时候经常会用到搜索框的获得焦点和失去焦点的事件,因为懒,每次都去写非常的烦,于是就一劳永逸,遇到类似情况就来调用一下就OK 了 相关js代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&

  • IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点

    公司WEB项目要求是必须兼容FF3,IE6/7/8.本文所述为IE6下的一个BUG. 项目里面写了一个自己封装的弹出层,原理是先动态添加一个遮罩层,再动态添加一个DIV(Table)层(做弹出层的PNG半透明边框效果),DIV里面动态添加一个IFrame,这个Iframe页面指向一个现存的HTM文件. 如果这个HTM文件中,包含文本输入框这样的一些表单元素,在IE6下就会出娄子了. 测试组的人说了,弹出层打开后,"经常"无法获取文本框的焦点,就是鼠标点文本框无法获取焦点并显示输入标记,

  • JS添加删除一组文本框并对输入信息加以验证判断其正确性

    在做项目中遇到这样一个问题,就是我们需要添加几组数据到数据库,但是具体几组数据不确定,有客户来填写,比如我们需要添加打折策略,可能个策略有很多组方案,比如"满100打5折,满200打4折,满500打3折"等等,这是作为一组方案来执行的,但是并不确定一组方案中有几个子方案,所以,这里我用JS进行添加删除子方案,并要对方案输入的正确性加以判断,并且通过json传输写入数据库,这里我们主要写如果添加删除一组子项目和如果给每个文本框添加验证. 动态添加一组文本框: 复制代码 代码如下: var

  • JS input文本框禁用右键和复制粘贴功能的代码

    复制代码 代码如下: function click(e) { if (document.all) { if (event.button==1||event.button==2||event.button==3) { oncontextmenu='return false'; } } if (document.layers) { if (e.which == 3) { oncontextmenu='return false'; } } } if (document.layers) { docume

  • jquery实现文本框鼠标右击无效以及不能输入的代码

    具体的程序代码如下:   复制代码 代码如下: <asp:TextBox ID="NodeText" runat="server"></asp:TextBox>    <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>    <script type="text/javascript&

  • javaScript让文本框内的最后一个文字的后面获得焦点实现代码

    javaScript让文本框内的最后一个文字的后面获得焦点实现代码

    复制代码 代码如下: <script> //当失去交点以后 让文本框内的文字获得焦点 并且光标移到最后一个字后面 function myfocus(myid) { if(isNav){ document.getElementById(myid).focus();// 获取焦点 }else{ setFocus.call(document.getElementById(myid)); } } var isNav = (window.navigator.appName.toLowerCase().i

  • Javascript 文本框textarea高度随内容自适应增长收缩

    直接上代码: 方案一: 枫芸志 » 文本框textarea高度自适应增长/伸缩 textarea { height:100px; width: 300px; } 晴枫制作 http://jb51.net // 最小高度 var minHeight = 100; // 最大高度,超过则出现滚动条 var maxHeight = 300; function ResizeTextarea(){ var t = document.getElementById('txtContent'); h = t.s

  • js点击文本框后才加载验证码实例代码

    经常到各大网站去留言或者发帖的朋友应该知道现在很多网站的留言地方的验证码不是直接显示的.而是在点击验证码输入框之后才会显示出来验证码的.下面作者也总结了一篇关于如何利用js实现点击文本框然后再加载验证码的效果的. 废话不多说了,下面是具体的实现代码. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title

  • .NET WinFrom中给文本框添加拖放事件的代码

    在开发.NET WinForm程序时,有时候我们希望窗体上的文本框能接受鼠标拖放事件,比如允许将文件直接拖放到文本框中以直接获取到文件的本地路径,或者将选取的字符串直接拖放到文本框中等等.要实现这个功能其实很简单,代码如下. 1. 将文本框的属性AllowDrop设置成True 2. 给文本框添加DragEnter事件 复制代码 代码如下: private void textBox1_DragEnter(object sender, DragEventArgs e) { if (e.Data.G

  • 文本框中禁止非数字字符输入比如手机号码、邮编

    在工作中,总是遇到很多禁止非数字字符输入的文本框,比如手机号码了 邮编了 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css"> &l

  • 文本框只能选择数据到文本框禁止手动输入

    今天在醒目中碰到了一个问题.文本框只能上人家选择数据进去.不能手动输入.查了资料.最后解决如下. 页面代码: 复制代码 代码如下: <asp:TextBox ID="txtcategory" readonly="true" Width="300" CssClass="txt" runat="server"></asp:TextBox> 脚本(在给文本框赋值的时候使用): 复制代码 代

随机推荐