jQuery заполнитель / подсказка JavaScript, который держит подсказку в фокусе - PullRequest
Новая
       17

jQuery заполнитель / подсказка JavaScript, который держит подсказку в фокусе

1 голос
/ 12 августа 2011

Существуют сотни jQuery-заполнителей / подсказок.Но ни один, который делает то, что я хочу, делает

Я ищу тот, который будет:

  • Исчезает подсказка, когда пользователь фокусируется на поле, но не очищает его, покапользователь начинает печатать (как в StackOverflow / iOS)
  • Будет работать с атрибутом заполнителя HTML5.
  • Построен с помощью jQuery
  • Кросс-браузер (включая IE7 / IE8)
  • Использует ненавязчивый JavaScript
  • В идеале также будет работать с полями пароля

Ответы [ 2 ]

1 голос
/ 19 августа 2011

Обновление, благодаря chrisdpratt, я действительно нашел плагин, который делает то, что я хочу:

Демо: http://labs.mario.ec/jq-watermark/

Источник: https://github.com/marioestrada/jQuery-Watermark

1 голос
/ 13 августа 2011

@ Роатин Март прав;если вы собираетесь рассматривать текст как заполнитель, он должен быть очищен.Это само определение заполнителя.

Тем не менее, я смоделировал доказательство концепции, которую вы можете использовать по своему усмотрению.Однако мне пришлось сделать текст-заполнитель настолько легким, что его едва можно было увидеть, чтобы он не искажал передний текст слишком часто (поэтому по умолчанию это делается для очистки).

Вы можете видеть, что он работает на:http://jsfiddle.net/zYQ4Q/4/

// Create placeholder input to serve as background
var $test = $('#test');
var $placeholder = $test.clone().removeAttr('id').removeAttr('placeholder').addClass('placeholder').val($test.attr('placeholder'));
var $container = $('<span class="placeholder-container"></span>');
$container.insertAfter($test).append($test).append($placeholder);

// Basic styling
$container.css({
   position: 'relative'
});
$test.css({
    position: 'absolute',
    left: 0,
    top: 0,
    zIndex: 10,
    backgroundColor: 'transparent',
    borderColor: 'transparent'
});
$placeholder.css('color', 'transparent');

// Behavior for focus and blur to achieve the visual effect
$test.focus(function(){
   var $input = $(this);
   var $placeholder = $('.placeholder', $input.parent());
   $placeholder.css('color', '#e0e0e0');
}).blur(function(){
   var $input = $(this);
   var $placeholder = $('.placeholder', $input.parent());
   if ($input.val() == '')
       $placeholder.css('color', 'transparent');
}).keyup(function(){
    var $input = $(this);
    if ($input.val().trim() != '') {
        $placeholder.val('');
    } else {
        $placeholder.val($input.attr('placeholder'));
    }
});

ОБНОВЛЕНИЕ : Код и jsfiddle были обновлены, чтобы отразить новые изменения, основанные на комментарии ОП.Заполнитель теперь очищается после ввода текста во ввод.

...