百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> js文本框点击清空,若没写则还原默认值
分享文章到:

js文本框点击清空,若没写则还原默认值

发布时间:01/15 来源: 浏览: 关键词:
本文章来给各位同学介绍一个关于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;");
   });
})

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有4人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板