JavaScriptのChromeスペルチェックの提案へのアクセス方法
JavaScriptのテキストエリア内のスペルミスをどのようにして検出しますか？これに関連するイベントはありますか？スペルミスのある単語について、Chromeのスペルチェック候補にアクセスするにはどうすればよいですか？
スペルミスのある単語について、Chromeのスペルチェック候補にアクセスするにはどうすればよいですか？
私の知る限り、 できません 。より完全に答えるために、関連する問題についても言及します。
- かつて、非公式のGoogleスペルチェックAPIがありました 消失しました
- ダウンロードはできるがアクセスはできない Chromeの組み込み辞書
- Googleの辞書用のオープンAPIはありません
これに関連するイベントはありますか？
いいえ、また contextmenu イベントはこの目的に役立つものを提供しません。スペルチェック情報がなく、コンテキストメニュー項目のリストを読むことができません（スペルの提案が含まれる場合があります） 。 change イベントもスペルチェック情報を提供しません。
JavaScriptのテキストエリア内のスペルミスをどのようにして検出しますか？
これを自分でコーディングするか、サードパーティのライブラリを使用できます。このトピックにはスタックオーバーフローに関する他の質問があるか、自分で検索できます。関連するスタックオーバーフローの質問は次のとおりです。
質問は少し広範で解釈に開かれているように見えるので（特に現在の報奨金-「要件」）、私はそれを解釈する方法を説明し、プロセスのサブ質問に答えようとします（Q/Aスタイル）。
あなたは尋ねているようです：
「Google Chrome」/「Chromium」固有：
Q：ブラウザ「Google Chrome」/「Chromium」の場合スペルチェックAPIを公開javascriptを使用してやり取りします一般的なウェブページ
A：いいえ、実際はそうではありません（少なくとも望みどおりではありません）。
Chromium固有の Spellcheck API 提案 （2012年12月以降）があります。以下にその一部を示します。
このAPIはWebプラットフォームの一部ですか？
スペルチェックがWebプラットフォームの一部になることはまずありません。さらに重要なことは、「loadDictionary」というメソッドが1つだけあることです。
loadDictionary( myDictionaryFile // string path or URL , dictionaryFormat // enumerated string [ "hunspell" (concatentation of .aff and .dic files) // , "text" (plain text) // ] ) // returns int indicating success or an error code in loading the dictionary.ポイント？ Spellcheckのバグ関連の約20〜30％がサポートされていない言語に関するものだったため、Zulu、Klingonなどのカスタム辞書の作成をコミュニティが支援します。
では、ChromeのSpellCheck API（上記）とChrome/WebkitのSpellCheck APIを混同しないようにしましょう。
ボノヒロノリ（Google Chromeのソフトウェアエンジニア） APIの提案 2011年頃と一部の 関連するバグの関係 および パッチ Chromeにあった（/まだ？）.void addSpellcheckRange( unsigned long start , unsigned long length , DOMStringList suggestions // [, unsigned short options] ); void removeSpellcheckRange(SpellcheckRange range);使用例：
var input = document.querySelector('input'); input.addSpellcheckRange( 4 , 9 , [ 'Chrome' , 'Firefox' , 'Opera' , 'Internet Explorer' ] );![from http://peter.sh/experiments/spellcheck-api/]()
ソース：
http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#42 、
http://peter.sh/experiments/spellcheck-api/ （このAPIがまだ動作する場合は、そこでライブで試すことができるはずです。）
ポイント？数日これを熟考した後、突然クリックしました：ブラウザとのカスタムスペルチェック統合-ブラウザをブロックして独自のものを提供する代わりに、ブラウザのコンテキストメニューを使用します。したがって、既存の外部スペルチェックライブラリとリンクできます。上記の歴史的および実験的APIは明らかに、達成したいことを直接サポートすることはありませんでした。
- Q：「Google Chrome」/「Chromium」spellcheck-APIが「onSpellError」（-like）eventを（たとえば）テキストエリアに公開する場合
A：上記のように、Chromeにはそのようなイベントはありません。
HTM5は現在、スペルチェックでサポートされている要素のスペルチェックを有効または無効にする機能のみを公開しています。 - Q：スペルミスのある単語に関するChromeのスペルチェックの提案にアクセスする
A：上記で概説したように、できないようです。ほとんど重複した質問と同じ答えのようです： Chromeのスペルチェック辞書にアクセスするにはどうすればよいですか？
興味深いことに、「 TinyMCEのスペルチェッカーは、Googleが所有するtoolbar APIを、Google独自の法的使用ポリシーに対して、「ハッキング」によって以前に提供されていたChromeこのスペルチェックサービスは完全に廃止されました。 "。Webを検索すると、おそらくその方法を見つけることができますが、それを実行する最善の方法とは思えません（ここで推奨します）。
ただし、JavaScriptスペルチェックライブラリを使用すると、Chromeの辞書を使用できます（そのため、辞書を維持する必要はありません）が、これらのファイルをWebアプリと一緒に提供および出荷する必要があります（ブラウザにインストールされているもの）。
一般：
Q： JavaScriptのテキストエリア内のスペルミスを検出する方法
A： Internet Explorerでは、次のコードスニペットにリストされているように、ActiveX経由でMicrosoft Wordに統合されたスペルチェッカーを使用できます。function CheckText(text) { var result = new Array; var app = new ActiveXObject('Word.Application'); var doc = app.Documents.Add(); doc.Content = text; for (var i = 1; i <= doc.SpellingErrors.Count; i++) { var spellingError = doc.SpellingErrors.Item(i); for (var j = 1; j <= spellingError.Words.Count; j++) { var Word = spellingError.Words.Item(j); var error = {}; error.Word = Word.Text; error.start = Word.Start; error.length = Word.Text.length; error.suggestions = new Array; var suggestions = Word.GetSpellingSuggestions(); for (var k = 1; k <= suggestions.Count; k++) { error.suggestions.Push(suggestions.Item(k).Name); } result.Push(error); } } return result; }ソース： https://lists.w3.org/Archives/Public/public-webapps/2011AprJun/0516.html
しかし、IE/ActiveX/MS-Wordはあなたが求めているものではありません。また、非常にクロスプラットフォーム/ブラウザでもありません。ローカルJavaScriptスペルチェックライブラリが残ります：
Javascriptスペルチェックメソッド
http://code.google.com/p/bjspell/
http://www.javascriptspellcheck.com/
http://ejohn.org/blog/revised-javascript-dictionary-search/
等。
それらの比較/説明は、この回答の範囲外です。
使用する辞書の形式に注意してください。または、外部のスペルチェックAPIサービスを使用できます（サーバーがデータを処理し、AJAXを使用してデータと通信します）。
明らかにプライバシーの問題を考慮する必要があります！
報奨金-「要件」は以下を要求します：
- Q：決定的証明
A：難解な実験的特徴よりも主題に関する何かを見つけたはずです。また、機能をいくつかの（今後の）標準化されたメソッド/イベント識別子などに詰め込もうとするライブラリも見当たりません。
前述のとおり、TinyMCEのような人気のあるライブラリには現在、他のソリューションもありません。
「生活水準」/「世界は私たちの遊び場」の考え方では、「送信」ボタンを押すと、私の答えはすでに時代遅れになる可能性があります。しかし、それでも近いうちに「実稼働」レベルのウェブサイト/インターフェースでこのような実験的な機能を推奨することはありません。 - Q：およびこれを達成する方法を説明する良い答えを得る
（クローム固有か、それとも一般的か？スペルチェックの提案、またはタイプミスの検出？）
A：上記以外に、私は何も考えられません（Web開発者が現在使用しているライブラリ（4を参照）以外）。
お役に立てれば！
Chromeのスペルチェックの提案にアクセスするためのAPIはありません。また、単語の入力ミス時にネイティブに発生するイベントもありません。ただし、イベントを実装できました。
この機能のユースケースが何であるかはわかりませんが、 montanaflynnのMashApeのSpellcheck API を使用してデモを作成しました。デモはテキスト領域を監視し、ユーザーが入力を一時停止すると、テスト対象のAPIを介してテキストを送信します。 APIは、元の文字列、推奨される修正された文字列、および修正された単語と推奨される置換を含むオブジェクトを含むJSONを返します。
テキストエリアの下に提案が表示されます。候補にカーソルを合わせると、入力ミスしたWordが強調表示されます。クリックすると、入力ミスが提案に置き換えられます。
また、APIの使用にプライバシーの層を追加するために、送信する前に文字列内の単語をスクランブルするシャッフル機能も追加しました（SSLも使用します）。 APIもChromeはコンテキストベースの提案を使用しないため、シャッフルは結果を変更しません。
CodePenへのリンクは次のとおりです。 http://codepen.io/aecend/pen/rOebQq
そして、ここにコードがあります：
[〜＃〜] css [〜＃〜]
<style>
* {
font-family: sans-serif;
}
textarea {
margin-bottom: 10px;
width: 500px;
height: 300px;
padding: 10px;
}
.words {
width: 500px;
}
.Word {
display: inline-block;
padding: 2px 5px 1px 5px;
border-radius: 2px;
background: #00B1E6;
color: white;
margin: 2px;
cursor: pointer;
}
</style>
[〜＃〜] html [〜＃〜]
<textarea id="text" placeholder="Type something here..."></textarea>
<div id="words"></div>
JavaScript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
;(function(){
"use strict";
var words = document.getElementById("words"),
input = document.getElementById("text"),
timeout, xhr;
input.addEventListener("keyup", function(e){
if (timeout) clearTimeout(timeout);
if (!this.value.trim()) words.innerHTML = '';
timeout = setTimeout(function() {
var test_phrase = shuffle_words( input.value );
spell_check(test_phrase);
timeout = null;
}, 500);
});
function shuffle_words(inp) {
inp = inp.replace(/\s+/g, ' ');
var arr = inp.split(" "),
n = arr.length;
while (n > 0) {
var i = Math.floor(Math.random() * n--),
t = arr[n];
arr[n] = arr[i];
arr[i] = t;
}
return arr.join(' ');
}
function spell_check(text){
if (xhr) xhr.abort();
xhr = $.ajax({
url: 'https://montanaflynn-spellcheck.p.mashape.com/check/',
headers: {
'X-Mashape-Key': 'U3ogA8RAAMmshGOJkNxkTBbuYYRTp1gMAuGjsniThZuaoKIyaj',
'Accept': 'application/json'
},
data: {
'text': text
},
cache: false,
success: function(result){
xhr = null;
suggest_words(result);
}
});
}
function suggest_words(obj){
if (!obj.corrections) return;
words.innerHTML = '';
for (var key in obj.corrections) {
if (obj.corrections.hasOwnProperty(key)) {
var div = document.createElement("div");
div.className = "Word";
div.innerHTML = obj.corrections[key][0];
div.orig = key;
div.onmouseover = function() {
var start = input.value.indexOf(this.orig);
input.selectionStart = start;
input.selectionEnd = start + this.orig.length;
};
div.onmouseout = function() {
var len = input.value.length;
input.selectionStart = len;
input.selectionEnd = len;
}
div.onclick = function() {
input.value = input.value.replace(this.orig, this.innerHTML);
this.parentNode.removeChild(this);
}
words.appendChild(div);
}
}
}
})();
</script>
このデモのAJAX要求を単純化するためにjQueryのみを使用しました。これはVanilla JSで簡単に実行できます。
内部ブラウザのスペルチェックを無効にし、他のオープンソースのスペルチェックライブラリを統合できます。たとえば、 JavaScript SpellCheck です。深い統合に必要なすべてのイベントが含まれています。 APIページ を確認してください。