输入框文字提示：默认为灰色，输入文字后显示黑色。
<style> /*demo css*/ #demo label input{_margin-top:1px;margin:5px 8px 5px 0;padding-left:5px;border:1px solid #999;width:200px;height:20px;font-size:14px;color:#000} #demo textarea{width:200px;height:60px;border:1px solid #999} </style> <form action="#" method="post"> <div id="demo"> <label for="id_0"><strong>input-one：</strong><input type="text" value="input-我是默认值" id="id_0" /></label><input type="submit" value="提交" /> <br /> <label for="id_1"><strong>input-two：</strong><input type="text" value="input-我是默认值" id="id_1" /></label><input type="submit" value="提交" /> <br /> <label for="id_2"><strong>input-three：</strong><input type="text" value="input-我是默认值" id="id_2" /></label><input type="submit" value="提交" /> <br /> <br /> <textarea>textarea-我是默认值</textarea> <textarea>textarea-我是默认值</textarea> <textarea>textarea-我是默认值</textarea> </div> </form> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script> ;(function($){ $.fn.extend({ iclear: function(options){ var iset = { name: null,//获取表单元素比如$(':text') curval: null,//默认显示文字,优先于表单默认值,为空时调用表单默认值 color: '#000',//点击后输入值颜色 curcolor: '#ccc',//默认颜色 enter: null } options=$.extend(iset, options || {}); iset.name.each(function(){ //当设置默认值是为表单赋默认值 if (iset.curval != null) { iset.name.val(iset.curval); } //表单focus,blur事件 $(this).css('color', iset.curcolor).focus(function(){ $(this).css('color',iset.color); if ($(this).val() == (iset.curval ? iset.curval : this.defaultvalue)) { $(this).val(''); } }).blur(function(){ if ($(this).val() == '') { $(this).val(iset.curval ? iset.curval : this.defaultvalue).css('color', iset.curcolor); } }); //绑定回车事件 if (iset.enter != null) { $(this).keydown(function(e){ if (e.keycode == 13) { iset.enter.click(); } }); } }); } }); })(jquery); //插件调用 $(function(){ $('#demo').iclear({ name: $(':text'), enter: $(':submit') }); $('#demo').iclear({ name: $('textarea'), curval: '我是重新设定的值' }); }); </script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
.font1{
color:#aaaaaa;
}
.font2
{
color:black;
}
</style>
</head>
<body>
<input type="text" value="请输入搜索结果" class="font1" onblur="if(this.value==''){this.value='请输入搜索结果';this.className='font1'}" onfocus="if(this.value==this.defaultValue){this.value='';this.className='font2'}">
</body>
</html>
<style>
html,body{margin:200px 400px;}
#search{color:#aaa;border:1px solid #CC0000;padding:1px; }
</style>
</head>
<body>
<input type="text" value="请输入关键字" id="search" />
</body>
<script language="javascript">
var s=document.getElementById("search");
s.onfocus=function(){if(this.value==this.defaultValue)this.value=''};
s.onblur=function (){if(/^\s*$/.test(this.value)){this.value=this.defaultValue;this.style.color='#aaa'}}
s.onkeydown=function(){ this.style.color='#333'}
</script>
======================================================================================
<form method="post" action="#" id="whichform"> <fieldset> <p> <label for="name">Name:</label> <input type="text" id="name" name="name" value="Your name" class="required" /> </p> <p> <label for="email">Email:</label> <input type="text" id="email" name="email" value="Your email address" class="email required" /> </p> <p> <label for="message">Message:</label> <textarea cols="45" rows="7" id="message" name="message" class="required">Write your message here.</textarea> </p> <input type="submit" value="Send" /> </fieldset> </form>
function resetFileds() { var whichform = document.getElementById("whichform"); for(var i=0; i<whichform.elements.length; i++) { var element = whichform.elements[i]; if(element.type == "submit") continue; if(!element.defaultValue) continue; element.onfocus = function() { if(this.value == this.defaultValue) { this.value = ""; } } element.onblur = function() { if(this.value == "") { this.value = this.defaultValue; this.style.color = "#999"; } } element.onclick = function() { this.style.color = "#000"; } } }
