发表新帖
发表新帖

Setting spellcheck language in Google Chrome

后端 未结
关注
1 1873
無奈伤痛
無奈伤痛 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;   
}
    

    

    

    
Here is some texxt with spellung erreurs. Also you have to click inside the div to chekc erorrrrs.

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

    enter image description here

    UPDATE:

    In this HTML snippet, the first