jQuery实现input文本框内灰色提示文本效果 和 input标签获取焦点是文本框内提示信息清空
一、jQuery实现input文本框内灰色提示文本效果
?
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>input test</title> <script type="text/javascript" src="./js/jquery.js"></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(); //直接调用就OK了 }) </script> </head> <body> <input type="text" value="输入您的用户名" /> <input type="text" value="输入您的登录密码" content="text/html; charset=utf-8"></head><script language="javascript" type="text/javascript"> 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'); //设置文本框中的字体颜色为灰色 document.getElementById('test').style.color='#C0C0C0'; 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);</script><body><input type="text" id="test" value="中文" /></body></html>?