Menu
I'm trying to create a simple editable field (for posting) while combining a spellcheck:
<div contenteditable="contenteditable" spellcheck="spellcheck" lang="en">text</div>
(http://www.wufoo.com/html5/attributes/17-spellcheck.html)
It works, but on Google Chrome, the spellchecker doesn't detect the language. (despite the specified @lang attribute)
The "bug" was fixed in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=338427
But I can't find anything about Google Chrome's implementation of this. Is there a way to notify the spellchecker about the expected language in an HTML5 field? Maybe something in the <head> like charset, meta lang, etc?
330
The spellcheck attribute is not implemented in all browsers yet. If it is, there are some bugs need to be fixed.
According to W3Schools:... (Update: now supported by "all" browsers.)
When I visit the link you mentioned above (in Chrome 22) there are some bugs. The spellchecker says on "key" it's mispelled, and double clicking on some words makes it indicated as misspelled, too. I had Hungarian selected as spellchecking language.
NOTE: The language can be changed by right-clicking on the input, but you need to reload the page.
Also there are some browsers where spellchecking is turned of in the settings.
As I saw in the comments, bwitkowicz mentioned a solution with JS.
function updateStatus() {
console.log("updating");
$("#spellStatus").text( String( $("#textContent").attr("spellcheck") ) );
$("#editStatus").text( String( $("#textContent").attr("contentEditable") ) );
}
$(function() {
updateStatus();
$("#spell").ready(function() {
console.log("spell");
$("#textContent").attr( "spellcheck", function(ix,old) {
old = old === "false" ? false : true;
console.log("setting " + (!old));
return old;
});
});
$("#edit").ready(function() {
console.log("edit");
$("#textContent").attr( "contentEditable", function(ix,old) {
old = old === "false" ? true : false;
console.log("setting " + (!old));
return !old;
});
});
$("#spell, #edit").ready(updateStatus);
});#spell, #edit, #spellStatus, #editStatus {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div><button id="spell">Toggle Spellcheck</button><span id="spellStatus"></span></div>
<div><button id="edit">Toggle Editable</button><span id="editStatus"></span></div>
<div id="textContent" style="padding: 5px; border: 1px solid black;">
Here is some texxt with spellung erreurs. Also you have to click inside the div to chekc erorrrrs.
</div><html lang="en">
<body>
<textarea></textarea>
<textarea lang="fr"></textarea>
<div lang="ru">
<textarea></textarea>
</div>
</body>
</html>
In this HTML snippet, the first <textarea> will be spell checked in English, the second in French, and the third in Russian.
If an element specifies a language, and the user has no dictionary installed for that language, spell check is disabled by default, although the user may choose to manually enable it.
Hope that helps some way. The only problem is you need to click inside the div (if you use the JS solution) to check misspelling.
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
