如何在文本输入字段中获取新值并取消事件？

问题描述

我有一个输入 (type=text)，我想在更改后检查该值是否有效。目前我这样做：

<input type="text" onkeypress="return validateInput(event)"></input>

function validateInput(event) {
    var ascii = event.keyCode;
    if(ascii == 0) {
        return false;
    }
}

问题是，我不仅需要检查输入的字符是什么，还需要检查它在字符串中的位置。因此我想知道输入的新值，但 onkeypress 事件似乎没有这样的属性。 onchange 事件允许我获取新值并将其与旧值进行比较，但随后我将无法再通过返回 false 来取消该事件。

有没有办法将取消事件和知道新值（或新字符添加到当前字符串的位置）结合起来？

解决方法

选项 1

您可以使用 Event.preventDefault() 来阻止与事件关联的默认行为。

False

function validateInput(event) {
    let ascii = event.keyCode;
    if(ascii == 0) {
        event.preventDefault();
    }
}

有了这个解决方案，您必须考虑的是 <input type="text" onkeypress="return validateInput(event)"></input> 阻止了抛出实例可能具有的默认行为。当您依赖此默认行为时，这可能会成为一个问题。但在这种情况下，您故意阻止元素的默认行为（即向其内容添加字符）。

选项 2

您可以简单地记住更改前的文本，然后在更改无效时将其恢复。

Event.preventDefault()

var previousValue = "";
var iskeyDown = false;

function savePrevious(event)
{
  if(iskeyDown == false) // If the button wasn't released since the last evoke of this event...
  {
    // Do nothing
    return;
  }
  // Save the value before the change
  previousValue = document.getElementById("MyInput").value
  
  //Remember the key is pressed
  iskeyDown = true;
}

function validateInput(event)
{
  let myInputElement = document.getElementById("MyInput")
  console.log(myInputElement.value)
  if(true) // If new value is invalid...
  {
    //Roll back to before the change
    myInputElement.value = previousValue
  }
  // Remember that the key has been released
  iskeyDown = false;
}

并不是在对文本框的 <input id="MyInput" type="text" onkeydown="savePrevious(event)" onkeyup="validateInput(event)"></input> 成员进行更改之前执行 keydown 和 keypress，之后执行 value。

还应该注意的是，某些浏览器可能会多次发送这些事件，因此您需要一种机制（此处使用 keyup 实现）来避免对同一事件多次做出反应。否则你可能会得到奇怪的结果。

,

我相信您正在寻找的事件是输入，您可以阅读它here