WebKit의 텍스트 영역에 대한 맞춤법 검사

Question

저는 자연스럽게 많은 오류가있는 OCR 된 파일을 편집 할 수있는 브라우저 기반 QC/데이터 입력 응용 프로그램을 만들고 있습니다. 데이터 덩어리는 텍스트 영역에 넣어 검사 할 수 있지만 빨간색 밑줄은 사용자가 잘못 입력 한 단어에 커서를 수동으로 넣을 때만 나타납니다.

WebKit에서 작은 빨간색 맞춤법 검사 밑줄을 텍스트 영역에 추가하도록 할 수있는 방법이 있습니까?

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 test suite에서 해제되었다 ... 첫 번째 천 개 단어 이상 스캔하는 예입니다. 마크 파울러에서

Answer 2

실제로 작동하는지 여부는 알 수 없지만 선택 항목을 가지고 놀고 싶을 수도 있습니다. 당신은 더하는 방법에 대한 비트를 찾을 수 있습니다

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

: 다른 말로하면, 당신이 당신의 텍스트 영역을 업데이트 한 후에, 당신이 뭔가를 할 수있을 것 (그리고 "새로 고침"할이 빨간 밑줄 쇼를 만들기 위해) 여기에서 선택을 사용하십시오 : How do I select arbitrary text on the page using javascript? 또는 Google 검색을 통해.

내 생각에 선택을 만들면 (또는 생성 후 지울 수 있습니다) 맞춤법 새로 고침이 발생하는 다른 브라우저 이벤트가 트리거 될 수 있습니다.하지만 이는 단지 아이디어 일뿐입니다. textArea.value를 설정하는 것과 똑같은 일을 할 수 있습니다 (즉, 아무 것도 아님).

Answer 3

HTML5 Doctype을 사용하는 경우 spellcheck 속성을 사용할 수 있습니다. A similar question was asked here on StackOverflow 그리고 철자 검사 속성을 자세히 조사합니다.

Answer 4

멋진 대답은 여기에 개선이다

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 번호를 피할 수 있으며 여러 줄을 처리 할 수 ​​있습니다.