text 隐藏区域 文本提示

<script language="javascript" type="text/javascript" src="js/jquery-1.6.1.js"></script>//引入jquery 

 $(function () { $('#txtKeyWordzl1').textRemindAuto(); });

//======================保存为js文件也可以===================================

    //text文本提示 鼠标移到去文字消失 开始

    (function ($) {

        $.fn.textRemindAuto = function (options) {

            options = options || {};

            var defaults = {

                blurColor: '#999',

                focusColor: '#333',

                auto: true,

                chgClass: ''

            };

            var settings = $.extend(defaults, options);

            $(this).each(function () {

                if (defaults.auto) {

                    $(this).css('color', settings.blurColor);

                }

                var v = $.trim($(this).val());

                if (v) {

                    $(this).focus(function () {

                        if ($.trim($(this).val()) === v) {

                            $(this).val('');

                        }

                        $(this).css('color', settings.focusColor);

                        if (settings.chgClass) {

                            $(this).toggleClass(settings.chgClass);

                        }

                    }).blur(function () {

                        if ($.trim($(this).val()) === '') {

                            $(this).val(v);

                        }

                        $(this).css('color', settings.blurColor);

                        if (settings.chgClass) {

                            $(this).toggleClass(settings.chgClass);

                        }

                    });

                }

            });

        };

    })(jQuery); //text文本提示 鼠标移到去文字消失 结束

//====================================================

示例代码

CSS代码：

.textarea{border:1px solid #bbb; width:550px; height:80px;} .border{border:1px solid #34538b;}

HTML代码：

<h4>最简单的切换</h4> 

<p><input class="remindAuto" type="text" size="45" value="请出入姓名" />

</p> <p><textarea class="textarea remindAuto">内容不少于300字</textarea></p>

 <h4>外带class的切换</h4> <p><textarea class="textarea borderChange">变换边框颜色</textarea></p>                 <h4>改变显示的颜色</h4> 

<p><input id="textColorChg" type="text" size="45" value="请输入日期..." /></p>

JS代码：

$(function(){   

  $(".remindAuto").textRemindAuto();    

 $(".borderChange").textRemindAuto({chgClass: "border"});   

  $("#textColorChg").textRemindAuto({  

       focusColor: "red"       

  });

 });;

转载于:https://www.cnblogs.com/zhanglee/archive/2012/01/09/2731566.html