Question

我有一个javascript函数，用于检查输入的文本是否为数字。当用户单击输入按钮，并且文本不是数字时，它将在屏幕上显示一条消息。如果我一直按Enter键，则文本会不断出现，但是我想每次按Enter键时清除该文本，以免重复出现。

HMTL：

<div>
 Enter Distance: <input id="distance" type="text" name="txtDistance"><br>
 <p>
        <button id="enter" role="button">Enter</button>
      </p>
 </div>

 <div id="docBod">
    </div>

JavaScript代码：

document.getElementById('enter').addEventListener('click', function(event){

if(isNaN(document.getElementById('distance').value)){
    var docBod = document.body;
    var Error = document.createElement('h4');
    Error.textContent = "Please enter a number";
    docBod.appendChild(Error);
 }else{

 }

});

Answer 1

使用innerHTML将元素添加到正文中

document.getElementById('enter').addEventListener('click', function(event) {

  if (isNaN(document.getElementById('distance').value)) {
    var docBod = document.body;
    docBod.innerHTML += '<h4>Please enter a number</h4>'
  } else {

  }

});

<div>
  Enter Distance: <input id="distance" type="text" name="txtDistance"><br>
  <p>
    <button id="enter" role="button">Enter</button>
  </p>
</div>

<div id="docBod">
</div>

Answer 2

不确定我是否正确阅读了您的问题，但是以上答案并没有像您提到的那样清除该字段。我创建了下面的jsfiddle，让我知道这是否回答了您的问题。

https://jsfiddle.net/pon962ke/3/

HTML：

<input type="text" name="textBox" id="textBox">
<button id="button">Click Me</button>
<p id="error" style="display: none;">Please enter a number</p>

Answer 3

您遇到的明显问题是该行：

var Error = document.createElement('h4');

每次用户尝试提交非数字字符时，这都会创建一个新的<h4>元素，最终您的函数会将其追加到页面上。

避免该问题的一种方法是在页面上找到现有的<h4>元素（如果存在）并使用该元素；否则创建一个新的：

// here we use document.querySelector() to find the first, if any,
// element that matches the selector; if no such element is found
// document.querySelector() returns null, and we move on to creating
// a new <h4> element:
var Error = document.querySelector('h4') || document.createElement('h4');

这当然意味着将相同的消息添加到相同的元素，这并没有引起用户的注意。

因此，要引起用户的注意，有两种明显的解决方案：

将<input>设为焦点时清空/删除该元素，然后在发生新错误时将其添加回去，或者
将错误保留在适当的位置，但使用CSS过渡等方式添加闪烁的颜色。

为此，然后：

// because we use the elements more than once, we cache them:
const button = document.getElementById('enter'),
  input = document.getElementById('distance');

button.addEventListener('click', function(event) {
  // other than the use of the 'input' variable, this function
  // is unchanged from your original:
  if (isNaN(input.value)) {

    // using the docBod element, retrieving by its id,
    // instead of the document.body:
    var docBod = document.getElementById('docBod'),
      Error = document.createElement('h4');

    Error.textContent = "Please enter a number";
    docBod.appendChild(Error);
  }
});

// here we bind the anonymous function as the event-handler
// for the focus event:
input.addEventListener('focus', function() {

  // we find the existing <h4> element in the document, if
  // one exists, and cache it:
  const temp = document.querySelector('h4');

  // if no element was found then temp will be null:
  if (temp) {
    // if temp was found, then we use ChildNode.remove()
    // to remove it from the document:
    temp.remove();
  }
  // for user convenience we could also select the <input>
  // value:
  // input.select();
});

const button = document.getElementById('enter'),
  input = document.getElementById('distance');

button.addEventListener('click', function(event) {
  if (isNaN(input.value)) {
    var docBod = document.getElementById('docBod'),
      Error = document.createElement('h4');

    Error.textContent = "Please enter a number";
    docBod.appendChild(Error);
  }
});

input.addEventListener('focus', function() {
  const temp = document.querySelector('h4');
  if (temp) {
    temp.remove();
  }
  //input.select()
});

<div>
  Enter Distance: <input id="distance" type="text" name="txtDistance"><br>
  <p>
    <button id="enter" role="button">Enter</button>
  </p>
</div>

<div id="docBod">
</div>

要增加色彩以引起注意：

// again, caching the relevant elements:
const button = document.getElementById('enter'),
  input = document.getElementById('distance');

button.addEventListener('click', function(event) {
  if (isNaN(input.value)) {

    // as above, I've chosen to use the element with the id of
    // docBod to assign to the variable of the same name:
    var docBod = document.getElementById('docBod'),

      // as in the first answer we here look for the existing
      // element, if it doesn't exist we create it:
      Error = document.querySelector('h4') || document.createElement('h4');

    Error.textContent = "Please enter a number";
    docBod.appendChild(Error);
  }
});

上面的JavaScript依靠CSS提供动画：

// we create a CSS animation to animate the colour of the
// element to which the animation is bound from transparent
// (adjust to an appropriate colour of your choice) to
// #f90 (at the 75% point in the animation) and then back
// to transparent:
@keyframes attentionGrab {
  0% {
    background-color: transparent;
  }
  75% {
    background-color: #f90;
  }
  100% {
    background-color: transparent;
  }
}

h4 {
  /*
    'attentionGrab': the animation-name, the name of the
                     animation that we're using,
    '1.5s': the animation-duration, in seconds ('s'),
    'ease-in-out': the animation-timing-function,
    '1': the animation-iteration-count, here we play the
         animation once.
  */
  animation: attentionGrab 1.5s ease-in-out 1;
}

const button = document.getElementById('enter'),
  input = document.getElementById('distance');

button.addEventListener('click', function(event) {
  if (isNaN(input.value)) {
    var docBod = document.getElementById('docBod'),
      Error = document.querySelector('h4') || document.createElement('h4');

    Error.textContent = "Please enter a number";
    docBod.appendChild(Error);
  }
});

@keyframes attentionGrab {
  0% {
    background-color: transparent;
  }
  75% {
    background-color: #f90;
  }
  100% {
    background-color: transparent;
  }
}

h4 {
  animation: attentionGrab 1.5s ease-in-out 1;
}

<div>
  Enter Distance: <input id="distance" type="text" name="txtDistance"><br>
  <p>
    <button id="enter" role="button">Enter</button>
  </p>
</div>

<div id="docBod">
</div>

参考文献：

CSS：
- animation。
- animation-duration。
- animation-iteration-count
- animation-timing-function。
JavaScript：

参考书目：

“ Using CSS Animations”，位于Mozilla开发人员网络。

Answer 4

类似的事情应该起作用：

<div>
 Enter Distance: <input id="distance" type="text" name="txtDistance"><br>
 <p>
    <button id="enter" role="button">Enter</button>
  </p>
</div>

<div id="docBod">
 <h4 id="num-error"></h4>
</div>

然后在JavaScript中：

var numError = document.querySelector('#num-error');
document.getElementById('enter').addEventListener('click', function(event){

if(isNaN(document.getElementById('distance').value)){
   numError.textContent = "Please enter a number";
}else{
   numError.textContent = "";
}

});

清除文档正文中的文本

4 个答案: