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

前端之家收集整理的这篇文章主要介绍了html5 – 在Google Chrome中设置拼写检查语言前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建一个简单的可编辑字段(用于发布),同时组合拼写检查:
<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解决方案)来检查拼写错误.

猜你在找的HTML5相关文章