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>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
