jquery文本框效果
<!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> <script type="text/javascript" src="jquery所有版本/jquery/1.10.2/jquery-1.10.2.min.js"></script> <script type="text/javascript"> //当dom加载完成后执行的代码 $(document).ready(function(){ $("#userName").prop("value","字母和数字的组合且不少于8位"); $("#userName").addClass("font"); }) function clearText(){ var v = $("#userName").val(); if(v == "字母和数字的组合且不少于8位"){ $("#userName").prop("value",""); } } function checkText(){ var v = $("#userName").val(); if(v == ""){ $("#userName").prop("value","字母和数字的组合且不少于8位"); $("#userName").addClass("font"); }else{ $("#userName").removeClass("font"); } } </script> <style type="text/css"> .border{ border:1px solid red; } .font{ font-family:Arial, Helvetica, sans-serif; color:#CCCCCC; } </style> </head> <body> <fieldset style="width:500px;"> <legend align="left"> 注册页面: </legend> <p style="width:310px;" align="right"> username:<input type="text" id="userName" name="" value="" onfocus="clearText()" onblur="checkText()" style="width:220px"/><span id="userNameSpan" style="color:red">*</span> </p> <p style="width:310px;" align="right"> e-main:<input type="text" id="userName" name="" value="" style="width:220px"/><span id="userNameSpan" style="color:red">*</span> </p> </fieldset> </body> </html>