javascript - jQuery keyup 延迟 'editable' div 上的结果

Question

当用户编辑并插入字母时，我有一个可编辑的“div”，我正在检查值，以防当用户输入两个连续的“//”(正斜杠)时我会抛出错误..

但在键盘上我这样做了，但我没有收到错误抛出，在我输入第三个字母示例('///')后，只有我收到错误抛出。如何连续按两次“/”以获得实时输出？

这是我的代码:

<div aria-label="test" contenteditable="true" style="">test</div>

$('div').keyup(function(){
    var value = this.innerText.replace(/\/$/, '').replace(/\s+$/, '').toLowerCase().trim();

    if(value.match('//')){
        alert('this is invalid');
    }
    console.log(value);
})

Live Demo

Answer 1

该问题是由调用 .replace() 引起的其中删除最后一个 /从字符串中。所以基本上这就是当您输入 / 时发生的情况。 :

1. 用户输入 /和字符串 text/将转换为text
2. 用户然后输入 /再次，字符串被转换为 text/
3. 最后当第三个 /输入后，字符串将转换为 text//并触发alert()功能。

要解决此问题，您需要在修改字符串之前检查字符串是否有连续的斜杠。

$('div').keyup(function(){
    if (this.innerText.match(/\/\/$/)) {
        alert('this is invalid');
    }
    var value = this.innerText.replace(/\/$/, '').replace(/\s+$/, '').toLowerCase().trim();

    console.log(value);
});

Demo