Question

我想以html格式实现水印效果。

我想为我的所有文本框设置特定值。就像我的文本框字段

一样

   <input type="text" id="firstName" name="firstName" value="Enter First Name" class="inputTextboxId"/>

我想从值设置水印文字。（值=＆＃34;输入名字＆＃34;）。

我的javascript看起来像这样但它会将水印文本设置到我的所有表单字段中。

 $(document).ready(function () {
        var watermark = 'Enter something...';
        $('.inputTextboxId').blur(function () {
            if ($(this).val().length == 0)
                $(this).val(watermark).addClass('watermark');
        }).focus(function () {
            if ($(this).val() == watermark)
                $(this).val('').removeClass('watermark');
        }).val(watermark).addClass('watermark');
    });

如何将值文本设置为我的所有文本框？

我有这段代码但是在这段代码中我必须为所有文本框写这个。有没有什么办法可以做到这一点？

<input type="text" id="city" name="city" value="Enter Your City" class="inputTextboxId" onblur="if (this.value == '') { this.value = 'Enter Country City';this.style.color = 'Gray'; }" maxlength="255" onfocus="if(this.value == this.defaultValue){this.value='';this.style.color='Black'}"/>

Answer 1

这是艰难的方式。你想要写一个插件或者抓住一个随时可用的插件。

http://plugins.jquery.com/project/TinyWatermark

http://plugins.jquery.com/plugin-tags/watermark

这是我写的一个

这是js文件代码;

(function ($) {
    $.fn.extend({
        watermark: function () {
            return this.each(function () {
                var $obj = $(this);

                $obj.val($obj.attr("watermarkText"));

                $obj.focus(function (e) {
                    if ($obj.val() == $obj.attr("watermarkText"))
                        $obj.val("");
                });

                $obj.blur(function (e) {
                    if ($obj.val() == "")
                        $obj.val($obj.attr("watermarkText"));
                });

            });
        }
    });
})(jQuery);

然后在你的HTML中;

 <script>
        $(function () {
            $(".watermark").watermark();
</script>

<input id="author" value="" type="text" name="author" watermarkText="Your name..." class="watermark required">

在表格中使用水印效果

1 个答案: