2

我想知道如何识别在可编辑的 div 上插入的字符...我想查看用户是否键入了单引号或双引号，并将此引号的特定类赋予引号后的文本...我认为这是一个关键的财产或回报......我不知道......

有人有小费吗？

4

2 回答 2

1

该keypress事件是您想要的，因为这是您可以从中收集有关所键入字符的信息的唯一事件。在引用的情况下，您可以自己处理按键。<span>此处未介绍使用 CSS 类插入 a 的代码。如果您需要帮助，我建议您再问一个问题，或者阅读一些有关DOM Ranges、TextRanges和 selections in IE and other browsers的文档。

function handleKeypress(evt) {
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    var charStr = String.fromCharCode(charCode);
    if (charStr == "'" || charStr == '"') {
        // Code to insert quote character followed by <span> with CSS class
        // goes here.

        // Prevent the default action
        if (evt.preventDefault) {
            evt.preventDefault();
        } else {
            evt.returnValue = false;
        }
    }
}

var div = document.getElementById("your_div");
if (div.addEventListener) {
    div.addEventListener("keypress", handleKeypress, false);
} else if (div.attachEvent) {
    div.attachEvent("onkeypress", handleKeypress);
}
于 2010-08-05T22:55:41.617 回答
0

我不确定我是否完全理解您要执行的操作，但您似乎希望将用户输入捕获到具有 contentEditable 属性的 div 中。如果我使用Mootools和Firebug，我将从以下内容开始：

$('idOfEditableDiv').addEvent('keydown', function(event) {
    console.log(event.key);
    });

这会将在内容可编辑 div 内按下的任何键打印到 Firebug 控制台。所以如果我按'a'键，'a'将被打印出来。如果您要捕获没有明显值的输入（例如 Caps Lock 键），这可能会很有用。记录整个事件console.log(event)可以为您提供更多有用的信息。

当您确定了要捕获的键（例如 a 和 b 键）后，请执行以下操作：

$('idOfEditableDiv').addEvent('keydown', function(event) {
    if(event.key == 'a' || event.key == 'b') {
        //do stuff here if the a or b key was pressed
        }
    });

有时，如果按下 a 键，您可能想要做一些事情，如果按下 b 键，您可能会想做其他事情。在这种情况下，请执行以下操作：

$('idOfEditableDiv').addEvent('keydown', function(event) {
    if(event.key == 'a') {
        //do stuff here if the a key was pressed
        }
    else if(event.key == 'b') {
        //do stuff here if the b key was pressed
        }
    });

如果您不熟悉 Mootools，则需要将所有 Mootools 代码包装在 domReady 事件中，如下所示：

window.addEvent('domready', function() {
    $('idOfEditableDiv').addEvent('keydown', function(event) {
        if(event.key == 'a') {
            //do stuff here if the a key was pressed
            }
        else if(event.key == 'b') {
            //do stuff here if the b key was pressed
            }
        });
    });

有关 Mootools 活动的更多信息

于 2010-08-05T22:47:00.380 回答