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

Question

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

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

Answer 1

То keypress Событие - это то, что вы хотите, поскольку это единственное событие, из которого вы можете собрать информацию о набранном персонаже. Вы можете справиться с ключом себя в случае цитаты. Код для вставки <span> С классом CSS здесь не покрывается. Я бы предложил задавать другой вопрос, если вам нужна помощь, или, возможно, чтение некоторой документации на Дом варьируется, 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);
}

Answer 2

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

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

Это будет печатать в консоль Firebug любой клавиши, которая нажата внутри контента, редактируемого div. Так что, если я нажимаю клавишу «A», будет напечатан «A». Это может быть полезно, если вы хотите захватить вход, у которого нет очевидного значения, такого как ключ блокировки CAPS. Регистрация всего события с 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
        }
    });

Если вы не знакомы с 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