Javascript函数在文本框中输入数字时自动添加百分号？

Question

我正在开发一个网站，该网站有一个用于输入价格折扣的文本框，当有人在文本框中输入数字时，我希望自动将百分比添加到输入中。我确信这真的很简单，但我对 Javascript 很陌生，而且我在 SO 上找不到任何东西。

<div>
<label for="discount">Enter discount</label>
<input type="text" name="discount" id="discount" oninput="addPercent()">
</div>

谢谢！

Answer 1

我宁愿建议您在输入字段旁边添加 % 作为文本。

<div>
<label for="discount">Enter discount</label>
<input type="text" name="discount" id="discount" />
<span class="percent">%</span>
</div>

如果您仍然需要将其添加到输入字段，我建议在输入模糊上添加事件侦听器。

您可能还需要进行一些额外的验证来检查输入的整数值。此外，一旦焦点从输入中移除，模糊事件就会触发。使用 keyup/keydown 时，如果用户在输入字段中输入值太快，则可能会进入竞争状态。

document.getElementById('discount').addEventListener('blur', function() {
  this.value = this.value.replace('%','')+'%'; //remove existing % and add again
});

<div>
<label for="discount">Enter discount</label>
<input type="text" name="discount" id="discount">
</div>

Answer 2

只需在

<input>

中的文本末尾添加“%”可能就足够了，但过滤

<input>

以仅接受数字和点，然后添加“%”要好得多：

将输入事件绑定到

<input>

document.querySelector('input').oninput = function(e) { //...

获取

<input>

.replace()

的当前值，无论什么都不是数字或点。然后在值末尾添加“%”。

this.value = this.value.replace(/[^\d\.]/g, '') + '%';

接下来，获取value的结束位置

let end = this.value.length;

然后选择从结束位置到向后一个字符长度的选择范围。

this.setSelectionRange(end, end-1);

最后，设置

.focus()

，使光标始终位于“%”之前

this.focus()

您确定要在实际值中添加“%”吗？如果您打算处理该值，那么只需删除它以计算百分比，这将是一个额外的步骤。

document.querySelector('input').oninput = function(e) {
  this.value = this.value.replace(/[^\d\.]/g, '') + '%';
  let end = this.value.length;
  this.setSelectionRange(end, end-1);
  this.focus();
}

<input>