JavaScript :: Como identificar o que o personagem (ou string) foi inserido em uma div.

Question

Quero saber como identificar o que o personagem inserido em uma divisível de divisão ... quero ver se o usuário digita uma marca única ou dupla e dê uma classe específica a esta citação para o texto após a citação ... Eu acho que é uma propriedade ou retorno ... eu não sei ...

Alguém tem uma dica?

Answer 1

o keypress Evento é o que você deseja, pois esse é o único evento do qual você pode coletar informações sobre o personagem digitado. Você pode lidar com o KeyPress no caso de uma cotação. O código para inserir um <span> Com uma classe CSS, não é coberto aqui. Eu sugeriria fazer outra pergunta se você precisar de ajuda ou talvez ler alguma documentação sobre Dom Ranges, Textranges e seleções no ie e outros navegadores.

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

Não tenho certeza se entendi completamente o que você está tentando fazer, mas parece que deseja capturar a entrada do usuário em uma div com o atributo contentável. Se eu estivesse usando Mootools e Firebug Eu começaria com o seguinte ::

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

Isso imprimirá o console do Firebug, qualquer tecla pressionada dentro da div. Portanto, se eu pressionar a tecla 'a' 'a' será impressa. Isso pode ser útil se você deseja capturar a entrada que não possui um valor óbvio, como a tecla Caps Lock. Registrando todo o evento com console.log(event) pode fornecer informações ainda mais úteis.

Quando você identificar quais chaves você deseja capturar (digamos as teclas A e B), faça o seguinte:

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

Às vezes, você pode querer fazer coisas se a tecla A foi pressionada e outras coisas se a tecla B fosse pressionada. Nesse caso, faça o seguinte:

$('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
        }
    });

Caso você não esteja familiarizado com o MooTools, você precisaria envolver todo o seu código MooTools em um evento Domready como este:

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

Mais informações sobre os eventos de MooTools