我正在尝试创建一个简单的可编辑字段(用于发布),同时组合拼写检查:
<div contenteditable="contenteditable" spellcheck="spellcheck" lang="en">text</div>
(http://www.wufoo.com/html5/attributes/17-spellcheck.html)
它可以工作,但在Google Chrome上,拼写检查器不会检测到该语言. (尽管指定了@lang属性)
Firefox中的“bug”已修复为https://bugzilla.mozilla.org/show_bug.cgi?id=338427
但是,我没有找到关于Google Chrome实现这一点的内容.有没有办法通知拼写检查器关于HTML5字段中的预期语言?也许在< head>像charset,Meta lang等等?
解决方法
所有浏览器中的spellcheck属性尚未实现.如果是,有一些bug需要修复.
根据W3Schools:
当我访问上面提到的链接(在Chrome 22中)有一些错误.拼写检查者说“键”是拼写错误的,双击某些单词也会被拼写错误.我把匈牙利人选为拼写检查语言.
注意:可以通过右键单击输入来更改语言,但需要重新加载页面.
还有一些浏览器在设置中打开拼写检查.
正如我在评论中看到的,bwitkowicz提到了一个解决方案与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",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>
我也找到了一个使用textareas的例子.检查这个fiddle.
更新:
<html lang="en">
<body>
<textarea></textarea>
<textarea lang="fr"></textarea>
<div lang="ru">
<textarea></textarea>
</div>
</body>
</html>
在这个HTML片段中,第一个< textarea>将用英语拼写检查,第二个用法语检查,第三个用俄文写.
如果元素指定了一种语言,并且用户没有为该语言安装字典,默认情况下禁用拼写检查,尽管用户可以选择手动启用它.
希望有所帮助.唯一的问题是您需要单击div内部(如果您使用JS解决方案)来检查拼写错误.