JavaScript :: Como identificar o que o personagem (ou string) foi inserido em uma div.
-
26-09-2019 - |
Pergunta
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?
Solução
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);
}
Outras dicas
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
}
});
});