contenteditable可编辑功能,监听输入内容与回车操作

contenteditable

在div元素上添加contenteditable="true" 可以让div变成可编辑元素

 <div class="word-block" contenteditable="true"></div>

同时还支持回车换行

回车后就会生成一个div元素

添加 -webkit-user-modify: read-write-plaintext-only; 属性只显示文本不会显示其他标签

禁止检查拼写

可以看到在输入单词时，会有红色波浪线，可以添加spellcheck="false" 属性禁止

<div class="word-block" contenteditable="true" spellcheck="false"></div>

监听输入控制只输入英文

input监听输入

使用@input方法监听输入

<div 
    class="word-block" 
    contenteditable="true" 
    spellcheck="false"
    @input="handleInput"
></div>
const handleInput = (event)=>{
    console.log("键入字符",event)
    const inputElement = event.target;
    const text = inputElement.textContent;
    
    // 使用正则表达式检查是否为英文字符
    const regex = /^[a-zA-Z\s]*$/; // 只允许输入英文字符和空格
    
    if (!regex.test(text)) {
        // 如果输入内容不符合要求，清除非英文字符
        inputElement.textContent = text.replace(/[^a-zA-Z\s]/g, '');
    }
}

const regex = /^[a-zA-Z\s]*$/;: 这行代码定义了一个正则表达式对象 regex。正则表达式 /^[a-zA-Z\s]*$/ 表示匹配以字母（大小写不限）和空格组成的字符串。其中：

^ 表示匹配字符串的开头。
[a-zA-Z\s] 表示匹配字母和空格，a-zA-Z 表示匹配任意字母（大小写不限），\s 表示匹配空格。
* 表示匹配前面的字符零次或多次。
$ 表示匹配字符串的结尾。
regex.test(text): 这行代码调用正则表达式对象 regex 的 test() 方法，用来检查字符串 text 是否符合正则表达式的匹配规则。如果 text 中只包含字母和空格，test() 方法将返回 true；否则返回 false。

但是使用@input有个弊端，如果输非英文字母，光标就会跑动最前面

将光标移到最后

在输入非英文字符时，将光标移动到最后面

使用document.createRange() 方法用于创建一个新的 Range 对象，Range 对象代表文档中的一段连续的区域

let currentDom = document.getElementsByClassName('word-block')[0];
let range = document.createRange();
 range.selectNodeContents(currentDom);
 range.collapse(false);
 let sel = window.getSelection();
 sel?.removeAllRanges();
 sel?.addRange(range);

• 第一行代码 let currentDom = document.getElementsByClassName(‘word-block’)[0]; 用于获取文档中 class 为 ‘word-block’ 的第一个元素，并将其赋值给变量 currentDom。

• 接着创建一个 Range 对象，let range = document.createRange(); 这段代码用于创建一个新的 Range 对象。

• 然后，range.selectNodeContents(currentDom); 将选取 currentDom 元素的所有内容。

• 接下来，range.collapse(false); 将选区的边界折叠到选区的结束位置，即将选区的焦点放在内容的末尾。

• 这一行 let sel = window.getSelection(); 用于获取当前文档的 Selection 对象。

• sel?.removeAllRanges(); 会清除当前 Selection 对象中的所有选区。

• 最后，sel?.addRange(range); 将之前创建的 Range 对象添加到 Selection 对象中，这样就将选区设置为了 currentDom 元素的内容的末尾。