Asp.Mvc中的text实现 辅助用户输入 灰色字体

      在开发Web应用程序中经常需要用户在文本框输入信息，为了提高程序人性化设置以及用户体验效果常常需要在文本框中显示灰色字体辅助用户输入

如：

"文本不能为空"是这样实现的，博主进行了适当的封装，建立简单MVC.NET应用程序的Demo引用Jquery的包，html代码

@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery-textboxhelper.js"></script>
<script>
    $(function () {
        $('#button').click(function () {
            var getTextValue = $('#text').val();
            if (getTextValue == '')
            {
                alert("文本为空!");
                return;
            }
            alert(getTextValue);
        })


        $("#text").TextTip("文本不能为空");

    })
</script>

<input  id="text" type="text" />
<input id="button"  type="button" value="输出文本值"/>

关键在于自定义js文件jquery-textboxhelper.js

 

(function ($) {
    var defaults = {
        fontColor: '#ccc',
        tipContent: '请输入内容',
        focusColor: 'black'
    };

    $.fn.TextTip = function (tipContent, fontColor) {
        var options = {};
        $.extend(options, defaults)

        if (typeof tipContent == 'string') {
            options.tipContent = tipContent
        }

        if (typeof fontColor == 'string') {
            options.fontColor = fontColor
        }

        this.each(function () {
            $(this).bind({
                focus: function () {
                    if (this.value == options.tipContent) {
                        this.value = "";
                        this.style.color = options.focusColor
                    }

                }, blur: function () {
                    if (this.value == "") {
                        this.value = options.tipContent;
                        this.style.color = options.fontColor
                    }
                }
            })

            $(this).val(options.tipContent).css('color', options.fontColor);
            $(this).blur();
        })
    }
})(jQuery);

 

演示：

 源代码下载