jquery实现input文本框内提示文本

发布时间:2019-07-14编辑:脚本学堂
jquery实现文本框内显示提示文本的方法,input文本框内灰色提示文本效果,不错的jquery特效代码,需要的朋友参考下。

一、jquery实现input文本框内灰色提示文本效果
 

复制代码 代码示例:
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>文本框内显示提示文本 - www.jb200.com</title> 
<script src="jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function inputTipText(){
$("input[class*=grayTips]") //所有样式名中含有grayTips的input 
.each(function(){ 
var oldVal=$(this).val();//默认的提示性文本 
$(this) 
.css({"color":"#888"})  //灰色 
.focus(function(){ 
 if($(this).val()!=oldVal){$(this).css({"color":"#000"})}else{$(this).val("").css({"color":"#888"})} 
}) 
.blur(function(){ 
 if($(this).val()==""){$(this).val(oldVal).css({"color":"#888"})} 
}) 
.keydown(function(){$(this).css({"color":"#000"})}) 
}) 

 
$(function(){ 
inputTipText();  //直接调用 
}) 
</script> 
</head> 
<body> 
<input type="text" value="输入您的用户名" class="grayTips" /> 
<input type="text" value="输入您的登录密码" class="aaagrayTips"/> 
</body> 
</html> 

2、js代码
 

复制代码 代码示例:

function addLoadEvent(func){ 
 var oldonload = window.onload; 
 if (typeof window.onload != 'function'){ 
  window.onload = func; 
 }else{ 
  window.onload = function(){ 
oldonload(); 
func(); 
  } 
 } 

function checkText(){ 
 var textId = document.getElementById('test'); 
 var textDefault = '请输入字符'; 
 function cls(){ 
  if (this.value == textDefault){ 
this.value = ''; 
  } 
 } 
 function res(){ 
  if (this.value == ''){ 
this.value = textDefault; 
  } 
 } 
 textId.onfocus = cls; 
 textId.onblur = res; 

addLoadEvent (checkText); 

内容:<input id="test" type="text" value="请输入字符" />