заполнение формы с помощью jquery (делая его масштабируемым)

Question

У меня есть jquery ниже, который в основном предварительно заполняет текстовое поле.(На самом деле он заполняет диапазон над текстовым полем, который затем располагается над текстовым полем. Затем при щелчке диапазона он скрывается и фокусируется на текстовом поле.) Таким образом, мне не нужно добавлять предварительно заполненныйзначения в поле формы, поэтому, если пользователь отправляет его, он не передает заполненные значения вместе с ним.Прямо сейчас это, кажется, работает, но проблема в том, что у меня есть текстовые поля на странице, которые я хочу, чтобы все эти функции имели разные предварительно заполненные значения.Я пытаюсь найти способ сделать эту шкалу, поэтому мне нужна в основном одна функция, и в зависимости от идентификатора текстового поля она будет заполнять разные данные в вышеуказанном диапазоне.Любая помощь была бы великолепна!

Рабочий код jquery только для одного текстового поля: (Я действительно не хочу писать эту функцию снова и снова для каждого текстового поля

if($("#workphone").val().length == 0)
{
    var overlayCellPhone = $("<span class='prepopulation'>1234567890</span>");
    $("#workphone").parent().prepend(overlayCellPhone);


    $(".prepopulation").click(function(){
        $("#workphone").focus()
        $(".prepopulation").hide();
    });

    $("#workphone").blur(function(){
        if($("#workphone").val().length == 0)
        {
            $(".prepopulation").show();
        }

    });
}

Answer 1

HTML5 позволяет вам установить заполнитель текста для полей ввода , указав что-то вроде:

<input name="lol" placeholder="1234567890">

После этого используйте плагин jQuery , чтобы включить placeholder s в старых браузерах.

Answer 2

Это должно выглядеть так:

var holders = {
  "phone": "1234567890",
  "email": "address@domain.com"
  };
$(":text").each(function(){
  var id = this.id, $input = $(this);
  if(typeof holders[id] != 'undefined') {
    var $holder = $("<span class='prepopulation'>" + holders[id] + "</span>");
    if ($input.val().length != 0) $holder.hide();
    $input.parent().prepend($holder);
    $holder.click(function(){
      $input.focus()
      $holder.hide();
    });
    $input.blur(function(){
      if($input.val().length == 0) {
        $holder.show();
      }
    });
  }
});