Question

如果在文本框中输入了非数字值，如何向用户显示错误消息。

错误消息可以显示在文本框下方，类似于仅输入数字

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

<input type="text" class="textfield" onkeypress="return isNumber(event)" />

Answer 1

只需在您的if中添加某种输出即可。像alert甚至更好，在输入字段附近显示一条消息。但这取决于你。

function isNumber(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;

  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    alert("only input numbers");
    return false;
  }

  return true;
}

<input type="text" class="textfield" onkeypress="return isNumber(event)" />

Answer 2

创建一个dom元素以显示错误，并添加一个类以将其最初隐藏。如果任何输入不是数字，则从元素

中删除该类。

function isNumber(evt) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    document.getElementById("errorNumber").classList.remove('error-hide')
    return false;
  }
  document.getElementById("errorNumber").classList.add('error-hide')
  return true;
}

.error {
  color: red;
}

.error-hide {
  display: none;
}

<input type="text" class="textfield" onkeyup="isNumber(event)" />
<p id="errorNumber" class='error error-hide'>Please enter only number </p>

Answer 3

您可以使用span元素在页面中内联显示消息：

function isNumber(evt) {
    var errorClass = document.querySelector('.error');
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        errorClass.style.display = 'block'; 
        return false;
    }
    errorClass.style.display = 'none';
    return true;
}

.error{
  display: none;
  color: red;
}

<input type="text" class="textfield" onkeypress="return isNumber(event)" />
<span class='error' >Enter numbers only</span>

Answer 4

当您从键盘的“数字键盘”中键入数字时，似乎不考虑数字。以下应该有效。

.error {
  color: red;
}

.error-hide {
  display: none;
}

<input type="text" class="textfield" onkeyup="isNumber(event)" />
<p id="errorNumber" class='error error-hide'>Please enter only number </p>

{{1}}

Answer 5

function isNumber(evt) {
    if(isNaN(evt.key)) {
        document.getElementById('inptErr').style.display = "block";
    } else {
        document.getElementById('inptErr').style.display = "none";
    }
}

<input type="text" class="textfield" onkeypress="isNumber(event)" />
<span id="inptErr" style="display:none;color:red;">Please enter numbers only</span>

如果输入非数字值，则显示错误消息

5 个答案: