Как инициализировать и контролировать веб-форму с помощью jQuery

Question

У меня есть простая веб-форма с 2 элементами:

<form>
    <input id="number" name="number" maxlength="1" type="text" />
    <textarea id="description" name="description"></textarea>
</form>

Я хочу сделать следующее через jQuery:

• Я хочу инициализировать #number нулем (0) серого цвета # 999
• Я хочу инициализировать # описание надписью "Введите здесь причину" серым цветом # 999
• Я хочу контролировать #number, ограничивая ввод до 1-5 и меняя цвет на синий # 00c, когда человек вводит число
• Я хочу, чтобы серый цифра ноль исчезла при фокусировке элемента, поэтому единственное, что можно ввести, - это одна цифра от 1 до 5
• Если человек отодвигает фокус от #number и не вводит цифры от 1 до 5, я хочу вернуть серый числовой ноль обратно в # number
• После ввода одной цифры я хочу, чтобы элемент управления или фокус переместился на #description, а серая инициализированная фраза в #description исчезла
• Наконец, я хочу, чтобы все, что было введено в #description, было выполнено синим цветом # 00c

Спасибо, что нашли время помочь мне с этим.

Answer 1

Относительно водяного знака: jquery-watermark

Относительно выборочного ввода: JQuery-проверка

Что касается других настроек:

$('#name').on('change',function(){ // re-empty field on invalid input
  if (this.value){
    var n = parseInt(this.value);
    if (isNaN(n) || n < 1 || n > 5)){
      $(this).val('').trigger('change');
    }
  }
}).on('keypress',function(){ // check for a valid number; continue to next field
  var n = parseInt(this.value,10);
  if (1 <= n && n <= 5){
    $('#description').focus();
  }
});

Между вышеупомянутым и двумя плагинами вы также можете настроить цвета или классы CSS.

Answer 2

Вы можете управлять стилями шрифта с помощью CSS. например:

input {color:#999;}

Вы можете установить входные значения с помощью jquery следующим образом:

$('#number').val('0');