jquery - jQuery 预填充和格式化文本字段

Question

这让我很困惑。

我有一个带有文本字段的 PHP 应用程序，客户端希望该字段预先填充 896-，然后用户输入只有五个数值，所以它就像 896-12569。我

我想在 jQuery 中做到这一点，这可能吗，如果可以的话怎么办？

Answer 1

我建议使用 CSS 执行此操作，但这是一个 jQuery 解决方案：

$('input').on('keyup', function() {
  var prefix = '896-';
  var value = this.value.replace(prefix, '').replace(/[^\d]/, '').substr(0, 5);
  this.value = prefix + value;
}).keyup(); // trigger the keyup event, so that the field is populated at load

显然交换input相关选择器，并根据需要添加事件（此示例仅适用于keyup事件）。

---

编辑

再次查看代码后，我注意到有一个小错误（按backspace一次），prefix再次添加（这是因为它input不再匹配，因此没有从输入的前 4 个字符：

var value = this.value.replace(this.value.substr(0, 4), '').replace(/[^\d]/, '').substr(0, 5);

Answer 2

为此，您不需要 jQuery。

只需将896-输入字段放在外部并将其样式设置为看起来正常

<div class="controls">
    896-<input type="text" name="postfix" class="prefixed-input" />
</div>

然后，在 PHP 中，您可以在存储之前将 896- 前缀到数字。

请参阅Bootstraps 网站上的示例。在“扩展表单控件”标题下。