Блог

Я хочу реализовать эффект водяного знака в своей HTML-форме.

У меня есть такой код http://jsfiddle.net/aMjT4/1 /

Я хочу установить определенное значение для всех моих текстовых полей. Как в моем поле текстового поля

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

Я хочу установить текст водяного знака из значения.(значение = «Введите имя»).

Мой 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'}"/>
  

Это трудный путь. Вы хотите просто либо написать плагин, либо взять тот, который легко доступен.

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">