Question

我正在尝试创建一个简单的可编辑字段（用于发布），同时组合拼写检查：

<div contenteditable="contenteditable" spellcheck="spellcheck" lang="en">text</div>

（http://www.wufoo.com/html5/attributes/17-spellcheck.html）

虽然有效，但在Google Chrome上，拼写检查程序无法检测到该语言。（尽管指定了@lang属性）

Firefox中修复了“错误”：https://bugzilla.mozilla.org/show_bug.cgi?id=338427

但我找不到任何关于谷歌Chrome的实现。有没有办法通知拼写检查器HTML5字段中的预期语言？也许<head>中的某些内容有charset，meta lang等等？

Answer 1

spellcheck属性尚未在所有浏览器中实现。如果是，则需要修复一些错误。

据W3Schools说：

enter image description here

当我访问您上面提到的链接时（在Chrome 22中），存在一些错误。拼写检查器在＆＃34; key＆＃34;它被拼错了，双击某些单词也表示拼写错误。我选择匈牙利语作为拼写检查语言。

注意：右键单击输入可以更改语言，但需要重新加载页面。

还有一些浏览器会在设置中启用拼写检查。

正如我在评论中看到的那样，bwitkowicz提到了JS的解决方案。

＆＃13;

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);
    
});

＆＃13;

#spell, #edit, #spellStatus, #editStatus {
     display: none;   
}

＆＃13;

<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>

＆＃13;

我也找到了一个使用textareas的例子。请检查此fiddle。

enter image description here

UPDATE：

<html lang="en">
<body>
  <textarea></textarea>
  <textarea lang="fr"></textarea>
  <div lang="ru">
    <textarea></textarea>
  </div>
</body>
</html>

在这个HTML代码段中，第一个<textarea>将用英语进行拼写检查，第二个用法语检查，第三个用俄语进行拼写检查。

如果元素指定了一种语言，并且用户没有为该语言安装字典，则默认情况下禁用拼写检查，但用户可以选择手动启用它。

希望有所帮助。唯一的问题是你需要在div中单击（如果你使用JS解决方案）来检查拼写错误。

在Google Chrome中设置拼写检查语言

1 个答案:

UPDATE：