在WebKit中强制对文本区域进行拼写检查

Question

我正在创建一个基于浏览器的QC /数据输入应用程序，它可以让人们编辑OCR文件，这些文件通常存在大量错误。将数据块放在文本区域中以便进行检查，但只有当用户手动将光标放在拼写错误的单词上时，才会出现红色下划线。

有没有办法强制WebKit在文本区域中添加小的红色拼写检查下划线？

- sakabako

Answer 1

基本上，您需要使用选择API来移动插入点到每个单词上，以便使Safari对其进行高亮显示。以下是一个示例，用于扫描前一千个单词...

textarea = document.getElementById("mytextarea");
textarea.focus();

var selection = window.getSelection();
selection.modify("move", "backward", "line");
for (var i = 0; i < 1000; i++ ) {
    selection.modify("move", "forward", "word");
}

// Remove focus from the element, since the word under
// the cursor won't have a misspelling marker.
textarea.blur();

这段代码摘自WebKit Layout测试套件。

- Mark Fowler

---

现在让它工作，你需要执行以下操作： await wait(0); selection.modify('move', 'forward', 'word');，其中 wait(ms) { return new Promise(resolve=> setTimeout(resolve, ms)) }。 - Machiaweliczny

Answer 2

Mark Fowler的回答很好，这里对其进行了改进：

textarea = document.getElementById("mytextarea");
textarea.focus();
var textLength = textarea.value.length;

var selection = window.getSelection();
for (var i = 0; i < textLength; i++ ) {
    selection.modify("move", "backward", "character");
}

// Remove focus from the element, since the word under
// the cursor won't have a misspelling marker.
textarea.blur();

因此，您可以避免任意的1000数字，并且它可以处理多行。

- Chango

Answer 3

我不确定这个方法是否真正可行，但你可以尝试调整选择内容。换句话说，在更新文本区域后（并希望“刷新”以显示红色下划线），你可以尝试做如下操作：

var length = document.getElementById('TEXTAREA#your').value.length;
document.getElementById('TEXTAREA#your').setSelectionRange(0, length);

您可以在这里找到更多关于如何使用选择的信息： 如何使用javascript选择页面上的任意文本？ 或通过谷歌搜索。

我的想法是创建一个选择（或者在创建之后清除它），可能会触发不同的浏览器事件，从而导致拼写检查刷新...但这只是一个想法；它可能与设置textArea.value（即什么也不做）完全相同。

- machineghost

---

这是一个好主意。我也在考虑逐字逐句地运行光标通过每个文本区域，但这可能需要足够长的时间来惹恼用户。 - sakabako

请告诉我它是否奏效，现在你让我很好奇 :-) - machineghost

我会尝试发布，但这只是匆忙项目的一小部分。 - sakabako