Javascript:：如何确定什么样的角色(or string)插入一个编辑div?

Question

我想知道如何识别的什么字插入一个div编辑...我想看看如果用户类型的单一或双引号，并得到一个特定类的这句话以后的文本的报价...我认为这是一个onkey财产或返回...我不知道...

任何人都具有尖端?

Answer 1

的 keypress 事件是你想要的，因为这是唯一的事件，从中可以收集有关信息的性格类型。你可以处理的按键在自己的情况的报价。该插入一个代码 <span> 与CSS类不包括在这里。我建议要求的另一个问题，如果你需要帮助，或者也许阅读了一些文档 DOM范围, TextRanges 并选择 在即 和 其他的浏览器.

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);
}

Answer 2

我不知道我完全明白你想什么来做，但是看来你想要捕获的用户输入的到div与contentEditable属性。如果我们使用 脱 和 萤火虫 我会开始下:

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

即将印成的萤火虫控制台任何关键的就是按下内容编辑的div。所以如果我按的"一个"关键，'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
        }
    });

有时候你也许想要做的东西，如果一个关键的是压制和其他的东西如果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
        }
    });

在情况下你不熟悉脱，你会需要所有你的包裹脱码在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
            }
        });
    });

更多的信息，脱事件