Faire un au lieu de en appuyant sur Enter sur un contenteditable
j'ai écrit un bout de code dans mon gestionnaire d'événements clavier pour insérer un <br> en réponse à la pression de la touche Entrée:
event.preventDefault();
document.execCommand('InsertHTML', true, '<br>');
cela ne fonctionne que si le curseur est entre deux lettres, si son à la fin j'ai besoin de deux <br> - éléments. Puis-je détecter si je suis au bout d'une ligne? Ou une autre idée pour l'Entrée de problème?
j'ai aussi essayé d'attraper l'événement-clé normal (sans la touche Ctrl pressée) et de créer un clavier-événement avec JS où la touche entrée est pressée avec le ctrl. Mais cela ne fonctionne pas...
Il a seulement à Travailler dans Webkit/Safari...
2 réponses
afin de résoudre votre problème, toujours garder un br élément comme dernier élément de votre div contenteditable. Cela assurera un comportement prévisible lors de l'injection d'un élément br par rapport à la valeur par défaut du navigateur pour l'injection d'éléments div. Vous pouvez vérifier le lastChild sur keyup et mouseup pour s'assurer que c'est un élément br. En supposant que vous avez un document comme:
<div id="editable" contenteditable="true"></div>
vous pouvez utiliser le JavaScript suivant (w / jQuery 1.4+) Pour conserver un élément br comme dernier élément et injecter un élément br au lieu de div div div:
$(function(){
$("#editable")
// make sure br is always the lastChild of contenteditable
.live("keyup mouseup", function(){
if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
this.appendChild(document.createChild("br"));
}
})
// use br instead of div div
.live("keypress", function(e){
if (e.which == 13) {
if (window.getSelection) {
var selection = window.getSelection(),
range = selection.getRangeAt(0),
br = document.createElement("br");
range.deleteContents();
range.insertNode(br);
range.setStartAfter(br);
range.setEndAfter(br);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
return false;
}
}
});
});
testé sur Apple OS X w / Google Chrome 7, Mozilla Firefox 3.6, Apple Safari 5). Essayez d'utiliser ierange pour que cela fonctionne dans Windows Internet Explorer.
Je lierais une fonction à l'événement keyup pour supprimer et changer en
en utilisant regEx. Donc même si cela crée un markup étrange, il sera corrigé.
utilisant jQuery:
$('.myEditable').keyup(function(){
var sanitazed = $(this).text().replace(/<div[^<]*?>/g, '').replace(/<\/div[^<]*?>/g, '<br>');
$(this).text(sanitazed);
});