实现一个最简单的输入框提示功能

实现原理:文本框失去焦点事件、获得焦点事件 
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的内容就是我们在页面上看到的内容。 

代码如下: 
"text" value="" placeholder="请输入内容" /> 
第二种: jQuery 原理:让表单的val值等于其title值。
代码如下:
"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>  
 

你可能感兴趣的:(实现一个最简单的输入框提示功能)