HTML5 заполнитель исчезает в фокусе

Question

Существует ли свободно доступный плагин jQuery, который изменяет поведение placeholder в соответствии со спецификацией HTML5?

Перед фокусом

На фокусе Хорошо (Safari)

На фокусе плохо (Chrome, Firefox)

Вы можете делать то, что делает ваш браузер с помощью этой простой скрипки .

В спецификации HTML5 написано :

Пользовательские агенты должны представить эту подсказку пользователю, после того, как зачеркнутые разрывы строк от него, когда значением элемента является пустая строка и / или , элемент управления не сфокусирован (например, отображая его внутри бланк, несфокусированный контроль и скрывающий его в противном случае).

"/ или" является новым в текущем черновике, поэтому я полагаю, именно поэтому Chrome и Firefox пока не поддерживают его. См. Ошибка WebKit # 73629 , Ошибка хрома # 103025 .

Answer 1

Стефано Дж. Аттарди написал хороший плагин jQuery, который просто делает это.
Он более стабилен, чем у Роберта, и при переходе в более светлый серый цветполе становится сфокусированным.

• См. демонстрационная страница
• Возьмите его на GitHub
• Играйте с Скрипка

---

Я изменил его плагин для чтения атрибута placeholder вместо ручного создания span.
Эта скрипка завершенакод:

HTML

<input type="text" placeholder="Hello, world!">

JS

// Original code by Stefano J. Attardi, MIT license

(function($) {
    function toggleLabel() {
        var input = $(this);

        if (!input.parent().hasClass('placeholder')) {
            var label = $('<label>').addClass('placeholder');
            input.wrap(label);

            var span = $('<span>');
            span.text(input.attr('placeholder'))
            input.removeAttr('placeholder');
            span.insertBefore(input);
        }

        setTimeout(function() {
            var def = input.attr('title');
            if (!input.val() || (input.val() == def)) {
                input.prev('span').css('visibility', '');
                if (def) {
                    var dummy = $('<label></label>').text(def).css('visibility','hidden').appendTo('body');
                    input.prev('span').css('margin-left', dummy.width() + 3 + 'px');
                    dummy.remove();
                }
            } else {
                input.prev('span').css('visibility', 'hidden');
            }
        }, 0);
    };

    function resetField() {
        var def = $(this).attr('title');
        if (!$(this).val() || ($(this).val() == def)) {
            $(this).val(def);
            $(this).prev('span').css('visibility', '');
        }
    };

    var fields = $('input, textarea');

    fields.live('mouseup', toggleLabel); // needed for IE reset icon [X]
    fields.live('keydown', toggleLabel);
    fields.live('paste', toggleLabel);
    fields.live('focusin', function() {
        $(this).prev('span').css('color', '#ccc');
    });
    fields.live('focusout', function() {
        $(this).prev('span').css('color', '#999');
    });

    $(function() {
       $('input[placeholder], textarea[placeholder]').each(
           function() { toggleLabel.call(this); }
       );
    });

})(jQuery);

CSS

.placeholder {
  background: white;
  float: left;
  clear: both;
}
.placeholder span {
  position: absolute;
  padding: 5px;
  margin-left: 3px;
  color: #999;
}
.placeholder input, .placeholder textarea {
  position: relative;
  margin: 0;
  border-width: 1px;
  padding: 6px;
  background: transparent;
  font: inherit;
}

/* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .placeholder input, .placeholder textarea { padding: 4px; }
}

Answer 2

Роберт Найман обсуждает проблему и документирует свой подход в своем блоге .
Это скрипка , в которой есть все необходимые HTML, CSS и JS.

К сожалению, он решает проблему, изменяя value.
Это не будет работать по определению, если текст placeholder сам по себе является допустимым.

Answer 3

Я нашел этот вопрос, найдя решение той же проблемы.Похоже, что существующие плагины либо не работают в старых браузерах, либо скрывают заполнитель в фокусе.

Поэтому я решил использовать свое собственное решение, пытаясь объединить лучшие части из существующих плагинов.

Вы можете проверить здесь и открыть вопрос, если у вас возникнут проблемы.

Answer 4

Как насчет чего-то простого? В фокусе сохраните значение атрибута заполнителя и полностью удалите атрибут; при размытии вставьте атрибут обратно:

$('input[type="text"]').focus( function(){
  $(this).attr("data-placeholder",$(this).attr('placeholder')).removeAttr("placeholder");
});
$('input[type="text"]').blur( function(){
  $(this).attr("placeholder",$(this).attr('data-placeholder'));
});   

Answer 5

Я написал свое собственное решение только для css3.Посмотрите, удовлетворяет ли это всем вашим потребностям.

http://codepen.io/fabiandarga/pen/MayNWm

Это мое решение:

1. элемент ввода установлен на «required»
2. требуется дополнительный элемент span для заполнителя.Этот элемент перемещается поверх элемента ввода (position: absolute;)
3. с помощью селекторов css, элемент input проверяется на достоверность (обязательные поля недействительны, если нет ввода), а заполнитель затемскрыто.

Подводный камень: Заполнитель блокирует события мыши для ввода!Эта проблема решается путем скрытия элемента-заполнителя, когда мышь находится внутри родительского элемента (оболочки).

<div class="wrapper">
  <input txpe="text" autofocus="autofocus" required/>
  <span class="placeholder">Hier text</span>
</div>

.placeholder {
  display: none;
  position: absolute;
  left: 0px;
  right: 0;
  top: 0px;
  color: #A1A1A1;
}
input:invalid + .placeholder {
  display: block;  /* show the placeholder as long as the "required" field is empty */
}
.wrapper:hover .placeholder {
  display: none; /* required to guarantee the input is clickable */
}

.wrapper{
  position: relative;
  display: inline-block;
}

Answer 6

Может быть, вы можете попробовать использовать шаблон меток с плавающей точкой:)

См. Метки с плавающей точкой в ​​CSS