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

Question

是否有任何智能、简约的方法可以始终在 HMTL 输入字段中显示数字的前缀(正数、负数)？ (例如+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;
}

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