gpt4 book ai didi

javascript - 可编辑 Div 未触发 "KeyUp"事件/删除突出显示

转载 作者:塔克拉玛干 更新时间:2023-11-02 22:46:39 24 4
gpt4 key购买 nike

我正在使用可编辑的 div:

<div class="editableDiv"  contenteditable="true">
sdtgssdrsdrtyy ╚asasasarrstssdertrtyrtyrrty ☻aaaaaaaaaaaaaaaaadaafsdsf4n
</div>

我的任务是向用户显示非 ascii 字符,以突出显示非 ascii 字符我使用了突出显示 jQuery 库,它通过添加带有“highlight”类的 span 来突出显示非 ascii 字符。innerHTML 如下:

<span class="highlight">╚</span>asasasarrstssdertrtyrtyrrty
<span class="highlight">☻</span>aaaaaaaaaaaaaadaafsdsf4n

突出显示效果很好,但唯一的问题是,当用户删除非 ascii 字符并从该位置开始输入时,输入的字符也会突出显示,当我检查 innerHTML 时,它显示新输入的字符也进入了范围标记如下:

<span class="highlight">☻aaa</span>aaaaaaaaaaaaaadaafsdsf4n

为了解决这个问题,我在可编辑的 div 上使用了 KeyUp 事件,在这个事件中,我将 span 与非 ascii 字符和新输入的字符分开,并将它们放入新的 span 标签中并替换旧的。这对于第一个 ``keyup` 工作正常,新输入的字符也没有突出显示,但之后当我再次键入时,此事件不会触发。

我不知道是什么原因造成的?这是因为我明确地更改了 div 的 innerHTML 吗?请帮忙。

以下是keyup函数:

$(document).on('keyup', ".editableDiv", function () {

var hilighterSpans = $(this).children(".highlight");

hilighterSpans.each(function (x, y) {

var spanText = $(y).text().trim();

if (spanText == "") {
$(y).remove();
}
else {

var regex = new RegExp("[^\u0020-\u007E]+");
var nonasciiChar = regex.exec(spanText);

if (nonasciiChar != "") {

var asciiChars = spanText.replace(nonasciiChar, '');

var spannode1 = document.createElement('span');

var spannode2 = document.createElement('span');
spannode2.className = 'highlight';
spannode2.innerHTML=nonasciiChar;

if (spanText.indexOf(nonasciiChar) == 0) {
$(spannode1).append(spannode2);
$(spannode1).append(asciiChars);
}
else {
$(spannode1).append(asciiChars);
$(spannode1).append(spannode2);
}

$(this).replaceWith(spannode1);
}
}
});

});

替换的innerHTML如下:

<span><span class="highlight">╚</span>assd</span>
<span><span class="highlight">☻</span>aaa</span>

这会导致问题吗?

JSFiddle for this problem

我 JSFiddle 尝试从突出显示的非 ascii 字符直接输入......我希望新输入的字符不突出显示......目前对于第一次输入它工作正常(尽管新输入的字符改变了位置,将有看看这个)...但是如果再次输入代码将不起作用(keyup 事件不会启动)...

最佳答案

问题是因为内部 .highlight 跨度也是可编辑的。

您需要将 spannode2 设置为 contenteditable="false",在创建 spannode2 元素后添加此行。

spannode2.setAttribute('contenteditable', 'false');

确保初始 .highlight 设置为 contenteditable="false"

简而言之,所有.highlight span都必须有contenteditable="false"

参见 jsfiddle

关于javascript - 可编辑 Div 未触发 "KeyUp"事件/删除突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26063574/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com