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

Posted 2023-03-05

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

【英文标题】：How to get the new value and cancel the event in an text input field?

【发布时间】：2021-08-01 19:11:59

【问题描述】：

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

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

【问题讨论】：

为什么需要return false，它是如何阻止你使用onchange的

嗯，返回false 就是取消onkeypress 事件，不是吗？随着onchange 事件返回false 不会取消该事件，无论如何都会添加新字符。

好的，如果你使用按键，你使用event.preventDefault()而不是return false

您可以参考@Guerric 的回答。这是正确的做法

【参考方案1】：

选项 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 实现）来避免多次对同一事件做出反应。否则你可能会得到奇怪的结果。

【讨论】：

好吧，问题是如何“做出反应”，因为通过返回 false 来取消事件，就像我之前所做的那样，不适用于 keyup 事件，是吗？

啊，看来我当时误解了这个问题。我以为您正在寻找一种方法来一次检查整个文本。我将调整 选项 2 以让您恢复无效的更改。

好的，选项 2 现在恢复无效更改。

谢谢，这样的事情会奏效。但是，使用这种方法不会取消事件，而只是回滚到以前的值。这样做的问题是，在它变回旧值之前，人们会在一秒钟内看到新值。知道如何解决这个问题吗？

好吧，选项 1 可以防止这种情况发生。对于选项 2，您还可以首先将新值写入缓冲区并将其更新到 keyup 上的字段。但是用户只有在再次释放按键后才能看到变化，这听起来也不太直观。

【参考方案2】：

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

【讨论】：

这对了解输入字段的新值有何帮助？

e.target.value?