我正在尝试创建一个简单的可编辑字段(用于发布),同时组合拼写检查:
<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>将用英语拼写检查,第二个用法语检查,第三个用俄文写.