js文本框点击清空，若没写则还原默认值
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 本文章来给各位同学介绍一个关于js文本框点击清空，若没写则还原默认值，希望些方法对各位同学在网页制作中做搜索框或用户名填写有默认提示时会有不小帮助哦。...
|
基于jquery方法
| 代码如下 |
复制代码 |
|
$('.default').focus(function(){
$(this).css('color','#000').val('');
$(this).blur(function(){
var text_val = $(this).val();
var $d_dom = $(this);
var d_dom = $d_dom[0];
if (text_val == d_dom.defaultValue || text_val == '') {
$(this).css('color','#ccc').val(d_dom.defaultValue);
//$(this).val('');
} else {
$(this).css('color','#000');
}
})
})
|
默认选中，谷歌浏览器下不太灵敏
| 代码如下 |
复制代码 |
|
$('.default').focus(function(){
$(this).css('color','#000').select();
$(this).blur(function(){
var text_val = $(this).val();
var $d_dom = $(this);
var d_dom = $d_dom[0];
if (text_val == d_dom.defaultValue || text_val == '') {
$(this).css('color','#ccc').val(d_dom.defaultValue);
//$(this).val('');
} else {
$(this).css('color','#000');
}
})
})
|
基于js方法,主要是利用获取焦点与失去焦点来实例
| 代码如下 |
复制代码 |
|
<input type="text" onblur="if(!this.value){this.value='请输入答案...';this.flag=undefined;}else{this.flag='true'};return true;" onfocus="if(this.value=='请输入答案...'&&!this.flag)this.value='';return true;" value="请输入答案..." />
|
jquery实例
| 代码如下 |
复制代码 |
|
<input type="text" id="demo" value="请输入" />
jquery code:
$(function(){
$("#demo").attr("style","color:#CCCCCC;font-style:italic;")
$("#demo").bind("focus",function(){
if($(this).val() =="请输入") $(this).val(""); $(this).removeAttr("style");
});
$("#demo").bind("blur",function(){
if($(this).val() =="") $(this).val("请输入"); $(this).attr("style","color:#CCCCCC;font-style:italic;");
});
})
|
|
