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

Question

是否有任何智能，极简主义的方法来始终在HTML输入字段中显示数字的前缀（正数，负数）？ （例如+1,0，-1）

我只找到了PHP的解决方案：How to prefix a positive number with plus sign in PHP

我必须使用<input type="text">，因为text=number在不同的浏览器中有不同的实现：Localization of input type number

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

Basevalue: 10
Mofification %: +10
Results: 11

Answer 1

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

var inputField = document.getElementById("#prefixedInput");
var inputFieldValue = inputField.value;

if (inputFieldValue > 0) {
    inputField.value = "+" + inputFieldValue;
}

if (inputFieldValue < 0) {
    inputField.value = "-" + inputFieldValue;
}

现在，它以一种不太有用的方式工作，因为这个函数将在页面加载时执行一次，所以如果你已经为你的输入分配了一个值，那么它将以其符号为前缀。但是，如果要将此行为绑定到某些操作（例如，即使用户在初始页面加载后插入值，也会为值添加前缀），您将被强制使用事件侦听器。