如何始终在 html 输入字段中显示数字前缀?

Question

是否有任何智能、简约的方法可以在 HMTL 输入字段中始终显示数字的前缀(正、负(？(例如 +1， 0， -1(

我只找到了 PHP 的解决方案： 如何在 PHP 中为正数添加加号前缀

我必须使用<input type="text">，因为在不同的浏览器中有不同的text=number实现： 输入类型编号的本地化

我为什么要这样做？ 我有一个输入字段，显示可以添加(或减去(到某个值的百分比。

Basevalue: 10 Mofification %: +10 Results: 11

Answer 1

最简单的方法是使用一些基本的javascript。在 HTML 页面的末尾(在正文结束标记之前(添加一个脚本，然后为输入提供一个 id，例如前缀输入。然后你可以写你的小脚本

var inputField = document.getElementById("#prefixedInput");
var inputFieldValue = inputField.value;
if (inputFieldValue > 0) {
inputField.value = "+" + inputFieldValue;
}
if (inputFieldValue < 0) {
inputField.value = "-" + inputFieldValue;
}

现在，它的工作方式并不是很有用，因为此函数将在页面加载时仅执行一次，因此，如果您已为输入分配了一个值，则将以其符号为前缀。但是，如果要将此行为绑定到某些操作(例如，即使用户在初始页面加载后插入值，也要为值添加前缀(，您将被迫使用事件侦听器。