jQuery paramètre position du curseur dans la div contenteditable
L'ancienne version de la question est ci-dessous, après des recherches plus, j'ai décidé de reformuler la question. Le problème, c'est que je dois focaliser un div contenteditable sans mettre le texte en surbrillance, en faisant un focus direct met le texte en surbrillance dans Chrome.
je me rends compte que les gens ont résolu ces problèmes dans textareas en réinitialisant la position caret dans la textarea. Comment puis-je faire cela avec un élément satisfaisant? Tous les plugins que j'ai essayés ne fonctionnent qu'avec des textareas. Grâce.
ancienne formulation de la question:
j'ai un élément qui contenteditable Je veux me concentrer, mais seulement dans la mesure où pour placer le curseur à l'avant de l'élément, plutôt la sélection tout.
elem.trigger('focus');avec jquery sélectionne tout le texte dans l'ensemble élément dans le navigateur chrome. Firefox se comporte correctement, le réglage du caret à la devant le texte. Comment puis-je obtenir Chrome se comporter comme je veux, ou est se concentrer peut-être pas quoi Je suis à la recherche pour.
Merci à tous.
5 réponses
démo: http://so.lucafilosofi.com/jquery-setting-cursor-position-in-contenteditable-div/
<div id="editable" contentEditable="true">
<h2>Lorem</h2> <p>ipsum dolor <i>sit</i>
amet, consectetur <strong>adipiscing</strong> elit.</p> Aenean.
</div>
<script type="text/javascript">
$(function () {
$('[contentEditable="true"]').on('click', function (e) {
if (!$(this).hasClass('editing')) {
var html = $(this).html();
if (html.length) {
var range = rangy.createRange();
$(this).toggleClass('editing').html('<span class="content-editable-wrapper">' + html + '</span>');
var $last = $(this).find('.content-editable-wrapper');
range.setStartAfter($last[0]);
range.collapse(false);
rangy.getSelection().setSingleRange(range);
}
}
}).on('blur', function () {
$(this).toggleClass('editing').find('.content-editable-wrapper').children().last().unwrap();
});
});
</script>
- NOTE: utiliser longiligne.js https://code.google.com/p/rangy/
peut-être que j'ai mal compris la question, mais ce qui suit ne le ferait pas (en supposant un modifiable <div> avec id "modifiable")? La minuterie est là parce que dans Chrome, le comportement natif du navigateur qui sélectionne l'élément entier semble se déclencher après le focus event, annulant ainsi l'effet du code de sélection à moins qu'il ne soit reporté après l'événement de mise au point:
var div = document.getElementById("editable");
div.onfocus = function() {
window.setTimeout(function() {
var sel, range;
if (window.getSelection && document.createRange) {
range = document.createRange();
range.selectNodeContents(div);
range.collapse(true);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(div);
range.collapse(true);
range.select();
}
}, 1);
};
div.focus();
Oui, il arrive parce que vous avez utilisé
elem.trigger('focus');
essayez d'utiliser class ou d'identifier l'élément sur lequel vous voulez lancer un événement déclencheur.
j'ai réussi à résoudre ce problème après un peu de fouillis autour du DOM.
elm.focus();
window.getSelection().setPosition(0);
cela ne fonctionne probablement que sur les navigateurs WebKit, mais puisque c'est la seule source du problème, j'ai ajouté un conditionnel (utilisant jQuery)
if(!$.browser.webkit) {
elm.focus();
} else {
elm.focus();
window.getSelection().setPosition(0);
}
J'espère que cela résoudra votre problème.
définir la position du pointeur dans la balise pre ou div:
function setCursor(pos) {
var el = document.getElementById("asd");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[0], pos);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
el.focus();
}
$('button').click(function () {
setCursor(5);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="asd" contenteditable="true" >
asd
two
</div>
<button>Set caret position</button>