jQuery заполнитель, который показывает заполнитель, пока текст не будет напечатан

Question

обратите внимание, как заполнитель работает в Stackoverflow, задайте заголовок вопроса и в форме регистрации Twitter: https://twitter.com/signup

Заполнитель имеет два состояния:

1. Не выбрано (заполнитель показан)
2. Выбранный, но 0 ввод (показан заполнитель, более светлый цвет)

Кто-нибудь знает плагин jQuery, который поддерживает это? Я видел плагины-заполнители jQuery, которые поддерживают # 1, но не # 2.

Спасибо

Answer 1

Вот быстрый и простой пример, с которого можно начать.

HTML

<input type='text' id='in' value='Enter Something...'>

JavaScript

$('#in').bind({
    click : function() {
        $(this).css('color','#ccc');
    },
    focusout : function() {
        $(this).css('color','#000');
    },
    keydown : function() {
        $(this).val('');
        $(this).css('color','#000');
        $(this).unbind('keydown');
        $(this).unbind('click');
    },
});

Удачи

РЕДАКТИРОВАТЬ: я увеличил функциональность и упаковал его как плагин, вы можете получить его на Github , на сайте jQuery Plugin или на Project Home (Доступны демонстрация и документация)

Answer 2

Я написал это для своих собственных проектов, и он прекрасно работает (требует jQuery) и очень прост в реализации.На самом деле он работает лучше, чем встроенная поддержка заполнителей и точно так же, как регистрация в Twitter.

Особенности:

• заполнитель - серый текст и превращается в светло-серый, когда находится в фокусе.
• заполнитель доступен, когда в поле ввода ничего не введено (показывает себяпри удалении)
• если вы щелкнете где-нибудь в пределах заполнителя, текстовый курсор переместится в начало поля, что означает, что вы не можете выделить его, или введите его в середине, например
• работает без сбоев при перемещении вперед и назад по входам как с помощью клавиши, так и мыши, а также при повторном использовании ввода
• простой в использовании только для одного или всех полей ввода (.placeHolder ();)
• <1kb </li>

1. Скопируйте этот скрипт в текстовый файл, сохраните как placeholder.js и загрузите в свой каталог js:

    (function( $ ){

       $.fn.placeHolder = function() {  
          var input = this;
          var text = input.attr('placeholder');  // make sure you have your placeholder attributes completed for each input field
          if (text) {
              input.val(text).css({ color:'grey' });
              input.focus(function(){  
                  if (input.val() === text) input.animate({ color:'lightGrey' }, 350).selectRange(0,0).one('keydown', function(){     
                      input.val("").css({ color:'black' });  
                  });
              });
              input.blur(function(){ 
                  if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' }); 
              }); 
              input.keyup(function(){ 
                  if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
                      input.val("").css({ color:'black' });
                  });     
              });   
              input.mouseup(function(){
                   if (input.val() === text) input.selectRange(0,0); 
              }); 
           }
       };

       $.fn.selectRange = function(start, end) {
            return this.each(function() {
                if (this.setSelectionRange) { this.setSelectionRange(start, end);
                } else if (this.createTextRange) {
                     var range = this.createTextRange();
                     range.collapse(true); 
                     range.moveEnd('character', end); 
                     range.moveStart('character', start); 
                     range.select(); 
                }
            });
       };

    })( jQuery );

Для использования только на одном входе

$('#myinput').placeHolder();  // just one

<script type="text/javascript" src="../js/placeholder.js"></script>   //include this in your header unless you are going to implement the placeholders for just non-HTML5 browsers. In that case see below. 

Для использования во всех полях ввода

$(":input").each(function(){   // this will work for all input fields
    $(this).placeHolder();
});

<script type="text/javascript" src="../js/placeholder.js"></script>  // include in header / change src to your actual js directory

Вот как я рекомендую применять его во всех полях ввода на вашем сайте, только если браузер не поддерживает атрибуты-заполнители HTML5:

var placeholder = 'placeholder' in document.createElement('input');  
if (!placeholder) {      // if the browser does not support placeholder, then use this script
  $.getScript("../js/placeholder.js", function() {   // save the above script as placeholder.js
      $(":input").each(function(){   // this will work for all input fields
        $(this).placeHolder();
      });
  });
} 

Помни тo удалить значения заполнителя при отправке:

$('#submit').click(function(){
   var text = this.attr('placeholder');
   var inputvalue = this.val();  // you need to collect this anyways
   if (text === inputvalue) inputvalue = "";

  // $.ajax(...  // do your ajax thing here

});

Answer 3

Вы можете попробовать подход постоянных заполнителей ( jsfiddle в комплекте). Он заставляет тег label работать так же, как заполнитель, чтобы получить то, о чем вы просите, т. Е. Текст по-прежнему отображается, но светлее, когда есть фокус, но нет ввода.

Вот пример разметки:

<div class="input-wrapper">
    <label for="id_username">Username</label>
    <input id="id_username" type="text" name="username">
</div>

Есть некоторые дополнительные JS и CSS, чтобы заставить его делать то, что вы хотите. Это очень похоже на то, как это делают твиттер и Tumblr. Некоторые хорошие побочные эффекты этого подхода:

• Вам никогда не придется беспокоиться о том, что текст заполнителя запутается в ваших формах
• заполнители будут работать в полях пароля
• доступная разметка