Question

我有一个包含2个元素的简单网页表单：

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

我想通过jQuery执行以下操作：

我想用灰色＃999
我想用灰色＃999
我希望通过将输入限制为1-5来控制#number，并在人输入数字时将颜色更改为蓝色＃00c
我希望灰色数字零在元素焦点上消失，因此唯一可以输入的是1到5的单个数字
如果此人将焦点从#number移开并且未输入1到5，我想将灰色数字零回到#number
输入单个数字后，我希望控件或焦点移至#description，＃description中的灰色初始化短语消失
最后，我希望在#description中输入的内容以蓝色＃00c

感谢您花时间帮我解决这个问题。

Answer 1

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

input {color:#999;}

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

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

Answer 2

关于水印：jquery-watermark

关于选择性输入：jquery-validation

就其他调整而言：

$('#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类。

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

2 个答案: