Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Over-ride Chrome Browser spell check language using JQuery or JavaScript

I am using the latest Chrome browser Version 55.0.2883.87 m.

On input elements on a HTML web page, how do I dynamically over-ride the language of the Chrome browser spell checker using JQuery/JavaScript?

For example if the page is displayed in English (US) and the spell checker is set to English (US), how can I pass in the German language code of de, so that the text area of all the input elements inside the form will spell check the input(s) with the German language and not the English (US) language?

Here is an example HTML text area.

<textarea cols="40" id="id_objective_details" maxlength="1000" name="objective_details" rows="10" class="kmw-disabled keymanweb-font textArea01"></textarea>
like image 485
user1261774 Avatar asked Dec 20 '16 23:12

user1261774


1 Answers

tl;dr

You can change the language using setAttribute('lang', lang) but Chrome doesn't use the lang attribute for spellcheck. This is a won't fix issue. Check the thread for more info.


Instead Chrome makes use of the user dictionaries which has to be selected by the user. (Try right-clicking a text-area -> Spellcheck -> Select language). Also the user should have the dictionary installed or else the spellcheck will not be possible.

You can try the following script and note that changing the lang attribute will not have effect but changing the language manually as mentioned above will.

function toLang(lang) {
  document.getElementById('id_objective_details').setAttribute('lang', lang);
}
<h3>Here is some random German text</h3>
<p>Hallo Welt, hallo und hallo wieder Welt.</p>

<h3>Here is some random English text</h3>
<p>Hello world, hello and hi again world.</p>
<textarea cols="40" id="id_objective_details" maxlength="1000" name="objective_details" rows="10" class="kmw-disabled keymanweb-font textArea01" spellcheck="true"></textarea>
<br>
<button onclick="toLang('en')">English check</button>
<button onclick="toLang('de')">German check</button>

You can perhaps use some external libraries like JavaScript SpellCheck or JQuery SpellCheck to get the job done.

like image 174
Divyanshu Maithani Avatar answered Sep 28 '22 03:09

Divyanshu Maithani