jQuery实现input文本框内灰色提示文本效果
方法1 <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="输入您的用户名" class="grayTips" /> <input type="text" value="输入您的登录密码" class="aaagrayTips"/> </body> </html> 方法2 <html> <head> <title></title> <meta http-equiv="Content-Type" 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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。