jQuery / javascript - поля ввода (пользователь, пароль) так же, как логин твиттера?

Question

Как я могу добиться того же эффекта, что и форма входа в Твиттер (вверху справа) - когда вы нажимаете на имя пользователя / передаете значение «имя пользователя», оно остается там до тех пор, пока вы не введете текст? Также он немного затемнен.

Спасибо!

Answer 1

Я кодировал плагин, чтобы сделать это, не смог найти ни одного, который бы использовал значение div по умолчанию в стиле twitter.

См. Рабочий скрипт: http://jsfiddle.net/garreh/nCCPQ/2/

---

jQuery: плагин $ .defaultText

// Basic Usage:
$('input').defaultText({ text: 'Username' });

// Provide a class to use:
$('input').defaultText({ text: 'Email address', css: 'enter_email' });


$.fn.defaultText = function(options) {
    var defaults = {
        css: 'dimmed'
    };

    var options = $.extend({}, defaults, options);

    if (!('text' in options)) return this;

    var input = this[0],
        $input = this,
        offset = $input.offset();

    function hide() {
      $div.hide();
      $input.add($div).removeClass(options.css);
    };

    function show() {
       $div.show();
       $input.add($div).addClass(options.css);
    }

    function focus() {
        if (input.value.length) hide();
        else show();
    };

    // Create div to put placeholder text in
    var $div = $('<div>' + options.text + '</div>')
        // Position it to the same place as the input box:
        .css({ position: 'absolute',
               top: offset.top,
               left: offset.left + 4,
               cursor: 'text'
            })
        .click(function() {
            $input.focus();
            focus();
        })
        .addClass(options.css + ' unselectable')
        .appendTo('body');

    // Also add the class to the input box:
    $input
        .addClass(options.css)
        .keyup(focus).blur(function() {
            if (!input.value.length) show();
        });

    return this;
};

---

465 байтов, 323 сжатых:

$.fn.defaultText=function(a){function d(){c.show();b.add(c).addClass(a.css)}
function e(){f.value.length?(c.hide(),b.add(c).removeClass(a.css)):d()}
a=$.extend({},{css:"dimmed"},a);if(!("text"in a))return this;var f=this[0],
b=this,g=b.offset(),c=$("<div>"+a.text+"</div>").css({position:"absolute",
top:g.top,left:g.left+4,cursor:"text"}).click(function(){b.focus();e()})
.addClass(a.css+" unselectable").appendTo("body");b.addClass(a.css).keyup(e)
.blur(function(){f.value.length||d()});return this};

Answer 2

Вы можете использовать ответ для Удалить значение по умолчанию для вводимого текста при нажатии или, если вам интересны некоторые формы HTML5 , теперь есть встроенная поддержка этой функции; он называется атрибут-заполнитель .

Twitter фактически использует '' внутри оболочки <div> и JavaScript для достижения этого эффекта.

<div class="holding username">
    <input type="text" id="username" value="" name="session[username_or_email]" title="Username or email" autocomplete="on">
    <span class="holder">Username</span>
</div>

Answer 3

Спасибо, Гарри. Чтобы устранить временную задержку между вводом текста пользователем и исчезновением текста по умолчанию, вы можете заменить приведенную выше функцию фокусировки на следующую функцию

function focus() {
        if ($(this).val()) hide();
        else show();
    };

Устраняет временную задержку .........

Answer 4

это новая и простая идея для простых форм входа в систему, пока html5 «заполнитель» не будет лучше поддерживаться: мы все знаем, что вы не можете изменить поля пароля на текст, поэтому показывать текст по умолчанию сложно, или вам нужен другой скрытый вводbox.

Почему бы не использовать фоновое изображение ??Если для фокуса установлено значение none, а затем для blur, если значение пустое, верните его обратно.Очень легко и хорошо поддерживается.Единственным недостатком является то, что ваш текст по умолчанию не текст, а изображение.Я не могу придумать ничего такого, что могло бы повлиять на юзабилити.

Answer 5

HTML:

<input type="text" title="User Name" value="User Name" class="username">

JQuery:

$('input.username')
.focus(function(){
  var $this = $(this);
  if ($this.val() == $this.attr('title')) {
    $this.val('').removeClass('dimmed');
  }
})
.blur(function(){
  var $this = $(this);
  if ($this.val().length == 0){
    $this.val($this.attr('title')).addClass('dimmed');
  }
});

CSS:

input.username {
  color: #000;
}
input.username.dimmed {
  color: #888;
}

Answer 6

Я бы просто использовал атрибут-заполнитель HTML5.

Твиттер на самом деле использует интервалы и стилирует их вместо местозаполнителя текстового поля ввода и использует javascript для удаления их из фокуса поля ввода.

Самый простой способ сделать это - использоватьHTML5-заполнитель с кросс-браузерным резервом от Modernizr, который выглядит следующим образом.

<script>
$(document).ready(function(){

if(!Modernizr.input.placeholder){

    $('[placeholder]').focus(function() {
      var input = $(this);
      if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
      }
    }).blur(function() {
      var input = $(this);
      if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
      }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
      $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
          input.val('');
        }
      })
    });

}

</script>

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

input[placeholder]:focus {
  // change style of placeholder on focus
}