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

【问题标题】：How to initialize and control web form with jQuery如何使用 jQuery 初始化和控制 Web 表单
【发布时间】：2012-03-07 01:30:04
【问题描述】：

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

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

我想通过jQuery做以下事情：

我想用灰色的零 (0) #999 初始化#number
我想用灰色的“在此处输入您的原因”初始化#description #999
我想通过将输入限制为 1-5 并将颜色更改为蓝色 #00c 来控制 #number，当人们输入数字时
我希望灰色数字零在元素焦点上消失，所以唯一可以输入的是从 1 到 5 的单个数字
如果此人将焦点从 #number 移开并且没有输入 1 到 5，我想将灰色数字零放回 #number
输入单个数字后，我希望控制或焦点移动到#description 并且#description 中的灰色初始化短语消失
最后，我希望在#description 中输入的任何内容都以蓝色#00c 完成

感谢您花时间帮助我。

【问题讨论】：

您正在尝试做的是所谓的水印。尝试查找，因为有大量可用资源。此外，输入[type="text"] 的最大长度属性是 maxlength，而不是 maxsize。
您有任何代码可以显示您当前尝试的内容吗？
@ChristianVarga：如果作者简洁明了，该链接会更好。尽管我同意这种说法，但发布不涉及尝试的问题的人不会深入阅读某些内容并说“现在我知道我做错了什么，请允许我解决这个问题”。
@BradChristie 如果有人读了这篇文章，我的工作就完成了:)

标签： jquery input webforms textarea

【解决方案1】：

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

input {color:#999;}

您可以像这样使用 jquery 设置输入值：

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

【讨论】：

【解决方案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 类。

【讨论】：

我尝试了您在 jsFiddle 中的建议，但无法正常工作。