jquery之input提示文字替换效果|CSSer课堂

jquery用于input提示文本的效果，简单实用，易于扩展。

<!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=utf-8" /> <title>default input text</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript"> function textReplacement(input){ var originalvalue = input.val(); input.focus( function(){ if( $.trim(input.val()) == originalvalue ){ input.val(''); } }); input.blur( function(){ if( $.trim(input.val()) == '' ){ input.val(originalvalue); } }); } $(function(){ textReplacement($('#uid')); }) </script> <style type="text/css"> body{font-size:76%;} input{font-size:1em;border-width:1px;padding:3px;} </style> </head> <body> <label for="uid">用户名：</label> <input type="text" value="请输入用户名" id="uid" /> </body> </html>

提示：你可以先修改部分代码再运行。

Trackback URI | Comments RSS

CSSer课堂

jquery之input提示文字替换效果

举手发言：

终极目标:验证CSS和(x)Html

课程分类

课程回顾

课堂讨论

My Links

SEO Links

大学课本