Javascript :: Come identificare ciò che è stato inserito il carattere (o stringa) su un div modificabile?

Question

Vorrei sapere come identificare ciò che il personaggio inserito in una modificabile div ... Voglio vedere se l'utente digita un segno di singole o doppie, e dare una specifica classe di questa citazione al testo dopo la citazione ... Penso che sia una proprietà onkey o il ritorno ... non so ...

Chiunque ha una punta?

Answer 1

L'evento keypress è ciò che si vuole, dal momento che è l'unico evento da cui è possibile raccogliere informazioni sul carattere digitato. Si potrebbe gestire la pressione di un tasto da soli nel caso di un preventivo. Il codice per inserire un <span> con una classe CSS non è coperto qui. Suggerirei di chiedere un'altra domanda, se hai bisogno di aiuto, o forse la lettura di alcuni documentazione sul DOM Ranges , TextRanges e selezioni in IE e altri browser .

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

Non sono sicuro che tutto capire ciò che si sta cercando di fare, ma sembra che si desidera catturare l'input dell'utente in un div con l'attributo contentEditable. Se dovessi usare Mootools e Firebug vorrei iniziare con il seguente ::

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

che verrà stampata nella console Firebug qualsiasi tasto premuto all'interno del contenuto div modificabile. Quindi, se si preme il tasto 'a', 'a' verranno stampati. Questo può essere utile se si sta cercando di ingresso di cattura che non ha un valore evidente come ad esempio il tasto Caps Lock. Registrazione l'intero evento con console.log(event) può darvi informazioni ancora più utili.

Una volta individuati quali tasti si desidera catturare (dire che i tasti A e B), quindi effettuare le seguenti operazioni:

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

A volte si potrebbe desiderare di fare cose se la chiave è stato premuto un e altre cose, se il tasto b è stato premuto. In tal caso, procedere come segue:

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

Nel caso in cui non hanno familiarità con Mootools, si avrebbe bisogno di avvolgere tutto il codice Mootools in un evento domready come questo:

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

Maggiori informazioni su Mootools Eventi