Question

您好，这是我现在只允许数字和最多4位数字的内容。我将如何做到这一点，以便我可以在允许最多4位数字上限的数字之前输入-？目前，如果我使用--之后只能输入3个数字，而我需要允许输入4个数字。

// Only Numbers can be Entered
function fNumOnly(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;

  if ((charCode >= 48 && charCode <= 57) || charCode == 45) {
    return true;
  }
  return false;
}

<input id="txtFahrenheit" type="text" onkeypress="return fNumOnly(event);" maxlength="4" />

Answer 1

为什么不将<input type="number">与最小值和最大值一起使用？例如：

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

<div>Enter a number between -9999 and 9999 (green for valid entry, red for invalid entry)</div>
<input type="number" name="num" min="-9999" max="9999" required>

Answer 2

您可以改为将事件侦听器添加到所需的按钮，然后在触发该事件时运行指定的函数。

var input = document.getElementById("txtFahrenheit");
input.addEventListener("input", function() {
  if (input.value < -9999) {
    input.value = -9999;
  } else if (input.value > 9999) {
    input.value = 9999;
  }
});

<input id="txtFahrenheit" type="number" min="-9999" max="9999">

通过将输入类型设置为数字，我们不必具有检查输入字符的代码。通过向其添加最大值和最小值，我们不允许用户使用向上和向下箭头来达到无效范围。

但是，附加的代码会双重确保这一点。如果他们输入任何内容，它将立即恢复为最大值和最小值。

没有它，有人可以手动输入100000，它将起作用。

Answer 3

您可以使用正则表达式检查输入值的长度。

function fNumOnly(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;

  if (
    ((charCode >= 48 && charCode <= 57) || charCode == 45) &&
    evt.target.value.match(/^-?\d{0,3}$/g)
  ) {
    return true;
  }
  return false;
}

<input id="txtFahrenheit" type="text" onkeypress="return fNumOnly(event);" />

此外，您可以使用type=number和min＆max属性进行输入，而不必在函数中检查charCode

function fNumOnly(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;

  if (evt.target.value.match(/^-?\d{0,3}$/g))
    return true;
  return false;
}

<input id="txtFahrenheit" type="number" onkeypress="return fNumOnly(event);" min="-9999" max="9999"/>

Answer 4

您可以这样做：

<input id="txtFahrenheit" type="text" maxlength="4">

然后使用脚本：

const input = document.getElementById("txtFahrenheit");

input.addEventListener("input", () => {
  if(input.value.indexOf("-") != -1) input.maxLength = 5;
  else input.maxLength = 4;
});

这将使您在输入字段中键入四个字符，除非它们之间有一个减号，在这种情况下，最大为五个字符。

Answer 5

尝试以下方法：

<input id="txtFahrenheit" type="number" oninput="checkLength(this);" />

<script>

function checkLength(inp)
{

if (inp.value > 0)
{
if (inp.value.length > 4)
{
inp.value = inp.value.slice(0, 4);
}
}
else
{
if (inp.value.length > 5)
{
inp.value = inp.value.slice(0, 5);
}

}
}

</script>

允许值介于-9999至9999的文本框

5 个答案: