Javascript :: Как определить, какой символ (или строка) был вставлен в редактируемый div? - PullRequest
Новая
       15

Javascript :: Как определить, какой символ (или строка) был вставлен в редактируемый div?

2 голосов
/ 06 августа 2010

Я хочу знать, как определить, какой символ вставлен в редактируемый элемент div ... Я хочу посмотреть, вводит ли пользователь одинарную или двойную кавычку, и назначить определенный класс этой цитате тексту после цитаты... я думаю, что это свойство onkey или возврат ... я не знаю ...

У кого-нибудь есть совет?

Ответы [ 2 ]

1 голос
/ 06 августа 2010

Событие keypress - это то, что вам нужно, поскольку это единственное событие, из которого вы можете собрать информацию о набранном персонаже. Вы можете справиться с нажатием клавиши самостоятельно в случае цитаты. Код для вставки <span> с классом CSS здесь не рассматривается. Я бы посоветовал задать другой вопрос, если вам нужна помощь, или, возможно, прочитать документацию по DOM Ranges , TextRanges и выборкам в IE и других браузерах . 

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);
}
0 голосов
/ 06 августа 2010

Я не уверен, что полностью понимаю, что вы пытаетесь сделать, но кажется, что вы хотите записать пользовательский ввод в div с атрибутом contentEditable. Если бы я использовал Mootools и Firebug , я бы начал со следующего: * 

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

Это выведет на консоль Firebug любую клавишу, которая нажата внутри редактируемого содержимого div. Поэтому, если я нажму клавишу «а», будет напечатано «а». Это может быть полезно, если вы хотите захватить ввод, который не имеет очевидного значения, такого как клавиша 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 Events

...