Каков наиболее точный способ эмулировать атрибут заполнителя в браузерах, которые изначально его не поддерживают?

«Большая часть кода, который я видел, принимает значение заполнителя и вставляет его в сам ввод, что приводит к этой проблеме»

Что ж, это в значительной степени то, что делает текст-заполнитель за кулисами (хотя он буквально не обновляет значение ввода).

Один из вариантов что-то вроде этого:

http://fuelyourcoding.com/scripts/infield/

Идея заключается в том, что вы перемещаете LABEL с помощью CSS, чтобы он находился поверх поля и выглядел как текст-заполнитель. Обратите внимание, что LABEL не обязательно совпадает с текстом-заполнителем. LABEL важно иметь, особенно для доступности, в то время как текст-заполнитель можно рассматривать как «текст справки» в дополнение к метке.

Другой вариант - это то, что вы делали, возьмите содержимое атрибута заполнителя и переместите его в значение самого ввода через JS.

Где вы зависаете, так это в том, что вы отправляете форму, прежде чем проверить, есть ли еще поддельный текст-заполнитель.

Чтобы обойти это, вы хотите прикрепить событие к отправке формы, которое перед отправкой формы сначала просматривает все поля ввода, получает их значения, сравнивает их с их атрибутами-заполнителями и, если они совпадают, устанавливает значение пустым.

ОБНОВИТЬ:

Чтобы решить проблему, которую вы подняли в комментарии к введенному пользователем значению, совпадающему с текстом заполнителя, вы можете сделать что-то вроде этого:

$('input[placeholder]').each(function(){

 if($(this).val() === $(this).attr('placeholder')){
      // in the odd situation where the field is prepopulated with
      // a value and the value just happens to match the placeholder,
      // then we need to flag it
      $(this).data('skipCompare','true');
  }    

// move the placeholder text into the field for the rest of the blank inputs
   if($(this).val().length===0){
       $(this).val($(this).attr('placeholder'))
   }

// move the placeholder text into the field for the rest of the blank inputs
  if($(this).val().length===0){
      $(this).val() = $(this).attr('placeholder');
  }


  $(this)
     .focus(function(){
           // remove placeholder text on focus
           if($(this).val()==$(this).attr('placeholder')){
               $(this).val('')
           }
     })
     .blur(function(){
         // flag fields that the user edits
         if( $(this).val().length>0 && $(this).val()==$(this).attr('placeholder')){
             $(this).data('skipCompare','true');
         }
         if ( $(this).val().length==0){
             // put the placeholder text back
             $(this).val($(this).attr('placeholder'));
         }
     })


 })

 $('#submitButton').click(function(){
   $('input[placeholder]').each(function(){
     if( !($(this).data('skipCompare')) && $(this).val() == $(this).attr('placeholder')     ){
         $(this).val('');
     };
     alert($(this).val());
   })
})

Уже поздно, и я устал, так что все это может быть совершенно неправильно. Гарантий не дали. ;)

Плагин jquery, который я написал некоторое время назад:

(function(){
    $.fn.inactiveText = function(inactiveClass, defaultValue){
        var a, b;
        this
            .data    ('defaultValue', defaultValue)
            .addClass('inactive')
            .focus(a=function(){
                var $this = $(this);
                if($this.hasClass(inactiveClass)){
                    (valFn.apply($this) == defaultValue) && $this.val('');
                    (valFn.apply($this) != defaultValue) && $this.removeClass(inactiveClass);
                }
    //            $this.hasClass(inactiveClass) && $this.valueIs(defaultValue).val('').end().valueIsNot(defaultValue).removeClass(inactiveClass);
            })
            .blur(b=function(){
                var $this = $(this);
                this.value || $this.addClass(inactiveClass).val(defaultValue);
            });
        this.each(a);
        this.each(b);

        this.setDefaultValue = function(d){
            this.each(a);
            defaultValue = d;
            this.each(b);
        };

        return this;
    };

    var valFn = $.fn.val;

    $.fn.val = function(v){
        if(typeof(v) == 'undefined'){
            var val = valFn.apply(this, arguments);
            return val == this.data('defaultValue') ? '' : val;
        }

        return valFn.apply(this, arguments);
    };
})();

Определите класс css для неактивного стиля (например, серый текст), и все готово.

обновленная скрипта: http://jsfiddle.net/cwolves/At8cu/1/

Предположим, что jQuery определен.

$(document).ready(function() {
    // Use native functionality if possible
    if (document.createElement('input').placeholder !== undefined) return;
    // Fallback code
    $('form').each(function(i, form) {
        var submitted = false;
        $(form).find('input[placeholder]').each(function(j, input) {
            addPlaceholder.call(input);
            $(input)
                .focus(removePlaceholder)
                .blur(addPlaceholder)
                ;
        });
        $(form).submit(function() {
            submitted = true;
            $(this).find('input[placeholder]').each(function(j, input) {
                removePlaceholder.call(input);
            });
        });
        function addPlaceholder() {
            if (!submitted && '' === $(this).val()) {
                $(this).val($(this).attr('placeholder')).addClass('placeholder');
            }
        }
        function removePlaceholder() {
            if ( $(this).hasClass('placeholder') &&
                 $(this).attr('placeholder') === $(this).val()
                 ) {
                $(this).val('').removeClass('placeholder');
            }
        }
    });
});

Оформите заполнитель с помощью CSS, чтобы он выглядел одинаково во всех браузерах:

            :-moz-placeholder { color: #bbb; opacity: 1; }
           ::-moz-placeholder { color: #bbb; opacity: 1; }
       :-ms-input-placeholder { color: #bbb; }
  ::-webkit-input-placeholder { color: #bbb; }
                 .placeholder { color: #bbb; }