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

Question

我有一个输入(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 来取消事件。

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

Answer 1

我相信您要查找的事件已输入，您可以继续阅读 here

Answer 2

选项 1

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

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

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

有了这个想法，您必须注意的是 Event.preventDefault() 阻止了投掷实例可能具有的默认行为。当您依赖此默认行为时，这可能会成为一个问题。但在这种情况下，您故意阻止元素的默认行为（即向其内容添加字符）。

选项 2

您可以简单地记住更改前的文本，如果更改无效，则在之后恢复它。

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。

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

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

How to get the new value and cancel the event in an text input field?

html

javascript

html-input

dom-events

选项 1

选项 2