javascript - 输入开头没有空格不适用于 addEventListener

Question

我一直在试图弄清楚为什么这不适用于事件监听器。此脚本可防止输入开头出现空白，因此我需要避免使用

this oninput="validate(this)"并将此脚本转换为使用事件监听器，而不是我已经尝试解决这个问题一段时间了，但我的代码并不走运。

function validate(input){
  if(/^\s/.test(input.value))
    input.value = '';
}

<input id='noWhiteSpaceAtTheStart' oninput="validate(this)" type='text'/>

Answer 1

您可以使用input 事件甚至keyup 事件。每次输入的文本更改时都会触发。据我所知，input 在 IE9+ 和其他现代浏览器中都被支持，而 keyup 在所有浏览器中都被支持。

input 事件示例:

var input = document.getElementById("noWhiteSpaceAtTheStart");
input.addEventListener('input', function() {
    if(/^\s/.test(input.value)) {
        input.value = '';
    }
});

keyup 事件的示例，这比后一种解决方案更难看，因为用户可以看到正在输入和删除的空格:

var input = document.getElementById("test");
input.addEventListener('keyup', function() {
    if(/^\s/.test(input.value))
       input.value = '';
});

使用 JavaScript 更改的输入必须手动触发，这可以通过以下方式使用 jQuery 轻松完成(可能不对原生 JavaScript 事件起作用，尚未测试):

var input = $("#input");
input.val("I am going through changes mom");
input.trigger("change");

不过，使用纯 JavaScript 来执行此操作稍微复杂一些。这是一个link在需要时提供帮助

这是一个有效的 codepen给你。