Question

我正在为印度语开发拼写检查程序。到目前为止，拼写检查器能够找到错误拼写的单词。

我正在使用内容可编辑的div来实现此目的。现在，我需要在用户右键单击或选择错误的单词时显示错误拼写单词的建议，以显示替换为错误拼写的单词或简单地忽略它。

我在perl中有一个建议生成器算法。我只需要链接javascript。我坚持如何显示建议（在光标处绘制菜单）。我在搜索Google后找到了一些代码。但是无法继续下去。

<script type="text/javascript">
    if (document.addEventListener) {
        document.addEventListener('contextmenu', function(e) {
            alert("You've tried to open context menu"); //here you draw your own menu
            e.preventDefault();
        }, false);
    } else {
        document.attachEvent('oncontextmenu', function() {
            alert("You've tried to open context menu");
            window.event.returnValue = false;
        });
    }
</script>

Answer 1

您可以使用jQuery来破坏您的目标。我已经创建了一个非常简单的示例，但是您可以根据需要进行一些努力（防止多个上下文菜单，样式，动态加载项目，......）。

<强> HTML <div id="context">lalalalala</div>

<强>的Javascript

$(document).ready(function(){
    $('#context').on('contextmenu', function(e){
        var content = $('#context').html();
        var temp = content + 
                   '<div style="background-color: #CCC; color: #000; width: 150px; padding: 5px;">\
                        <h4>Suggestions</h4>\
                            <ul class="suggestions">\
                                <li>first suggestion</li>\
                                <li>second suggestion</li>\
                                <li>third suggestion</li>\
                            </ul>\
                    </div>';
        $('#context').html(temp);

        $('.suggestions li').on('click', function(e){
            $('#context').html($(this).text());
        });
        e.preventDefault();
    });
});

http://jsfiddle.net/4gWjM/

Answer 2

您只需在spellcheck="true"

上使用div即可

实施例。 <div spellcheck="true"><input type="text" name="fname" ></div>

Reference site

Reference site 2

编辑：我忘记提供第二个链接

Answer 3

这样的事情：http://jsfiddle.net/974Dm/

它不会构建整个菜单，但它会在右键单击时为您提供拼写错误的单词。

var editor = document.getElementById("editor");

editor.addEventListener("contextmenu", function(event) {
    var misspelling = event.target;

    while (misspelling && misspelling.className != "misspelled") {
        misspelling = misspelling.parentNode;
    }

    if (misspelling) {
        // Show your suggestions menu
        // misspelling is <span class="mispelled">abc</span>
        console.log("Show suggestions for " + misspelling.innerHTML, misspelling);
        event.preventDefault();
    }
});

更新：要创建建议菜单，您需要使用AJAX。

在内容可编辑的div中显示拼写检查器的建议

3 个答案: