需要创建一个仅接受 a-z、A-Z 和空格中的字母的输入元素

Question

在页面上创建一个输入元素，其中包含占位符“输入您的姓名”和 HTML 内页面上的 H2 标题。 此输入元素的目的是输入用户名，因此它只能输入。 a-z、A-Z 和空格中的字母（不应检测所有其他字符）。 每当用户输入他们的名字时，他们的输入应该在标题内动态可见。 [请注意，除了允许的字符之外，标题中不应显示其他字符]

正文内的 HTML 代码

<h2></h2>
    <input placeholder="Enter your name" />

JavaScript 代码

let input = document.querySelector("input");
let h2 = document.querySelector("h2");

input.addEventListener("input",function(){
    console.log(input.value);
    h2.innerText=input.value;
});

Answer 1

使用

beforeinput

事件并测试

Event::data

是否与您允许的字符匹配。如果没有，请调用

Event::preventDefault()

取消输入的更改：

let input = document.querySelector("input");

input.addEventListener("beforeinput", e => /^[A-Za-z ]+$/.test(e.data) || e.preventDefault());

<h2></h2>
    <input placeholder="Enter your name" />