如何使用jQuery初始化和控制web表单

Question

我有一个简单的web表单，包含两个元素：

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

我想通过jQuery做以下事情：

• 我想用灰色的零（0）初始化#number#999
• 我想用灰色#999的"在这里输入你的原因"初始化#description
• 我想通过将输入限制为1-5并在用户输入数字时将颜色更改为蓝色来控制#数字
• 我希望灰色数字零在元素焦点上消失，所以唯一可以输入的是从1到5的一个数字
• 如果这个人把焦点从#number移开，并且没有输入1到5，我想把灰色数字零放回#number
• 输入个位数后，我希望控制或焦点移动到#description，#description中的灰色初始化短语消失
• 最后，我希望#description中输入的内容都是蓝色的#00c

谢谢你花时间帮我做这件事。

Answer 1

您可以使用css控制字体样式。例如：

input {color:#999;}

您可以使用jquery设置输入值，如下所示：

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

Answer 2

关于水印：jquery水印

关于选择性输入：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类。