Javascript :: Cómo identificar lo que se insertó el carácter (o cadena) en un div editable?

Question

Quiero saber cómo identificar lo que el personaje inserta en un editable div ... Quiero ver si el usuario escriba un simple o doble comilla, y dar una clase específica a esta cita con el texto después de la cita ... Creo que es una propiedad onkey o devolución ... no sé ...

Cualquier persona tiene una punta?

Answer 1

El evento keypress es lo que quiere, ya que es el único evento de la que puede recopilar información sobre el carácter escrito. Se podía manejar la pulsación de tecla a sí mismo en el caso de una cita. El código para insertar un <span> con una clase CSS no se describe aquí. Yo sugeriría otra pregunta si necesita ayuda, o tal vez la lectura de algunos documentos en DOM Ranges , TextRanges y selecciones en IE y otros 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

No estoy seguro de que en su totalidad a entender lo que está tratando de hacer, pero parece ser que desee introducir captura de usuario en un div con el atributo contentEditable. Si estuviera usando Mootools y Firebug me gustaría comenzar con la siguiente ::

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

Esto imprimirá en la consola de Firebug cualquier tecla que se presiona dentro de la div editable contenido. Así que si presiono la tecla 'a', 'a' se imprimirá. Esto puede ser útil si usted está buscando para la captura de entrada que no tiene un valor obvio como la tecla Caps Lock. Registro de todo el evento con console.log(event) le puede dar incluso la información más útil.

Cuando haya identificado las teclas que desea capturar (digamos las teclas A y B), a continuación, hacer lo siguiente:

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

A veces es posible que desee hacer cosas si se ha pulsado la tecla una y otra cosas si se ha pulsado la tecla b. En ese caso, haga lo siguiente:

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

En caso de que no están familiarizados con Mootools, que tendría que envuelva todo el código Mootools en un evento domready como esto:

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

Más información sobre Mootools Eventos