文本框文本域提示自动显示隐藏jQuery小插件
2012-08-06 14:49
671 查看
<style>
.textarea{border:1px solid #bbb; width:550px; height:80px;}
.border{border:1px solid #34538b;}
</style>
猛点Demo:http://220.194.52.12:8088/text-remind-auto-hide-show.html
.textarea{border:1px solid #bbb; width:550px; height:80px;}
.border{border:1px solid #34538b;}
</style>
<h4>最简单的切换</h4> <p><input class="remindAuto" type="text" size="45" value="请出入姓名" /></p> <h4>外带class的切换</h4> <p><textarea class="textarea borderChange">变换边框颜色</textarea></p> <h4>改变显示的颜色</h4> <p><input id="textColorChg" type="text" size="45" value="请输入日期..." /></p>
(function($){ $.fn.textRemindAuto = function(options){ var options = options || {}; var defaults = { blurColor : '#999', focusColor : '#333', auto : true, chgClass :'' }; var settings = $.extend(defaults,options); if( settings.auto ){ var v = $.trim($(this).val()); if( v ){ 14 $(this).each(function(i){ $(this).focus(function(){ if( $.trim($(this).val()) === v ){ $(this).val(''); }; $(this).css('color',settings.focusColor); if( settings.chgClass ){ $(this).toggleClass('border'); } 23 }).blur(function(){ if( $.trim($(this).val()) === '' ){ $(this).val(v); }; $(this).css('color',settings.blurColor); if( settings.chgClass ){ $(this).toggleClass('border'); }; }); }); }; } } })(jQuery) //调用方式 $('.remindAuto').textRemindAuto(); $('.borderChange').textRemindAuto({chgClass:'border'}) $('#textColorChg').textRemindAuto({focusColor:'red'})
猛点Demo:http://220.194.52.12:8088/text-remind-auto-hide-show.html
相关文章推荐
- 文本框文本域提示自动显示隐藏jQuery小插件实例页面
- 文本框/域文字提示自动显示隐藏jQuery小插件
- 基于JQuery实现鼠标点击文本框显示隐藏提示文本
- JQuery实现鼠标点击文本框显示隐藏提示文本
- 基于JQuery的浮动DIV显示提示信息并自动隐藏
- 基于JQuery的浮动DIV显示提示信息并自动隐藏
- JQuery 浮动DIV显示提示信息并自动隐藏
- 自己做jQuery开源插件之三:文本框自动提示插件
- 文本框邮箱地址自动提示jQuery插件
- jQuery插件,自动提示,文本框自动匹配
- 基于JQuery实现鼠标点击文本框显示隐藏提示文本
- jQuery实现文本域内提示文字,当鼠标点击进文本域后自动消失,文本域失去鼠标焦点后显示提示文字或显示用户输入的文字。
- 文本框邮箱地址自动提示jQuery插件
- jQuery Autocomplete插件实现文本框内容自动匹配补全
- jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件
- jquery.autoComplete文本框查询自动补全插件支持中文
- eclipse中显示jquery或extjs自动提示
- Struts2结合jquery autocomplet插件实现自动提示详解
- JQuery文本框高亮显示插件代码
- jquery插件小试牛刀:文本框为空时默认文字显示,获得焦点后默认文字消失