jQuery预填充并格式化文本字段

这让我很困惑

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

---

我想在jQuery中实现这一点，这可能吗？如果可能，如何实现？

您不需要jQuery来实现这一点

只需将

896-

置于输入字段之外，并将其样式设置为正常

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

896-

然后，在PHP中，您可以在存储之前将896-作为数字的前缀

---

请参见上的示例。在“扩展表单控件”标题下。

我建议使用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一次），ths

前缀

再次被添加（这是因为它没有从

输入中删除，因为它不再匹配），快速修复方法是始终替换输入的前4个字符：

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

这看起来你需要使用掩码：
$（“#日期”）.mask（“”）
billyonecan-这太接近了，但唯一的一件事是，我希望896在表单打开时立即出现在字段中，然后当用户开始键入时，他们的5位数字只需添加到896的末尾，在绑定后触发
keyup（）
，我认为这更好>单击字段的焦点，896-出现，但当我尝试添加数字掩码时，我要么出现错误，要么896被删除。我不确定我是否遵循-事实上我肯定我不遵循。：）太酷了-谢谢！！！！！！我甚至不会分享我添加了多少代码来尝试这种效果。