发表新帖
发表新帖

Setting spellcheck language in Google Chrome

后端 未结
关注
1 1857
無奈伤痛
無奈伤痛 2020-12-28 16:58

I\'m trying to create a simple editable field (for posting) while combining a spellcheck:



        

                      

              相关标签:
1条回答
  • 半阙折子戏
    2020-12-28 17:20

    The spellcheck attribute is not implemented in all browsers yet. If it is, there are some bugs need to be fixed.

    According to W3Schools:

    enter image description here

    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>

    Also I have found an example working with textareas. Check this fiddle.

    enter image description here

    UPDATE:

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

    In this HTML snippet, the first <textarea> will be spell checked in English, the second in French, and the third in Russian.

    If an element specifies a language, and the user has no dictionary installed for that language, spell check is disabled by default, although the user may choose to manually enable it.

    Hope that helps some way. The only problem is you need to click inside the div (if you use the JS solution) to check misspelling.

    0 讨论(0)
 看不清?
提交回复
热议问题