Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Force spell check on a textarea in WebKit

I'm creating a browser based QC/data entry app that will let people edit OCRed files, which naturally have tons of errors. Chunks of data are put in textareas so they can be checked, but the red underlines only appear when the user manually puts the cursor in a misspelled word.

Is there a way to force WebKit to add the little red spell check underlines to textareas?

like image 602
sakabako Avatar asked Dec 10 '09 23:12

sakabako


People also ask

Is spell check an attribute of textarea?

The Spell Check feature can be applied to HTML forms using the spellcheck attribute. The spellcheck attribute is an enumerated attribute which defines whether the HTML element will be checked for errors or not. It can be used with “input” and “textarea” fields in HTML.

How do I turn off spell check in textarea?

To disable spell check in textarea atrribute spellcheck=”false” can be used.

How do I get rid of the red underline in textarea?

In Textarea, Input fields or Content Editable, we can add spellcheck attribute with value true or false. spellcheck=”false”: Will NOT check Spelling Error and will NOT show a red underline when a field is in focus.

How do I turn on spell check for typing?

Here's how. Click File > Options > Proofing, clear the Check spelling as you type box, and click OK. To turn spell check back on, repeat the process and select the Check spelling as you type box. To check spelling manually, click Review > Spelling & Grammar.


1 Answers

Essentially you need to use the selection api to move the insertion point over each word to get Safari to highlight it. Here's an example to scan over the first thousand words...

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();

This code was lifted from the WebKit Layout test suite.

like image 58
Mark Fowler Avatar answered Oct 20 '22 10:10

Mark Fowler