11
votes

Comment évitez-vous de perdre la concentration sur un élément contenttible lorsqu'un utilisateur clique-t-il à l'extérieur de cet élément?

Je veux empêcher une zone contentiable de la perte de mise au point si un clic est effectué à l'extérieur de cette zone. Un exemple d'échantillon HTML ressemble à ceci: xxx

échantillon JavaScript est comme suit: xxx

lorsque vous cliquez sur le #clickthis < / Code> DIV ou n'importe où en dehors du #Content div, vous perdez la mise au point sur le #content SIV même si vous appelez la fonction EventDefault .

En outre, la plage change au moment où l'événement de clic est tiré, je ne peux donc pas revenir à la plage précédente une fois le clic survenu. Y a-t-il un moyen de maintenir la position du curseur et de se concentrer après un clic sur un clic?

jsfiddle: http://jsfiddle.net/vivekvish/fkdhe/4/


5 commentaires

Eh bien, je sais que cela est possible dans Jeditable, si vous préférez utiliser ce plugin, il vous donnerait également beaucoup plus de puissance AppelsIini.net/Projects/jeditable


Mes besoins sont super spécifiques. J'ai déjà construit un wysiwyg entier. Il serait difficile de revenir. Merci pour la suggestion cependant. Comment faites-vous précisément en jeditable? Si vous pouviez l'expliquer, je peux peut-être reproduire la fonctionnalité.


C'est une option que vous écririez, ONBLUR: Aucun, et merci de ne pas vous déchirer la tête pour offrir une solution différente au problème;)


Essayez l'événement MouseDown, peut-être que la gamme n'a pas changé à cet événement


Merci Juan. Cela a parfaitement fonctionné. Prévenir la valeur par défaut pour MouseDown l'a fait. S'il vous plaît faites votre commentaire une réponse afin que je puisse l'accepter. Et merci encore pour les idées, Mazzzzz. Je ne l'ai pas essayé. Peut-être ça marche toujours.


3 Réponses :


0
votes

Essayez d'ajouter $ ('# content'). Focus (); après e.preventDefault (); Ce n'est pas une solution parfaite, car elle saute au début, mais essayez-la.

Quoi qu'il en soit, êtes-vous sûr qu'il est une bonne idée de forcer l'utilisateur à ce domaine? :)


1 commentaires

Dans mon cas, oui. L'application complète est un éditeur WYSIWYG et lorsque l'utilisateur clique sur une barre d'outils mais manque un bouton, il doit cliquer sur la position du contenu qu'elles étaient auparavant, puis cliquez à nouveau sur le bouton de la barre d'outils. Le $ ('# Content'). Focus () SUIT SUIT SUR cela. C'est-à-dire qu'ils devront cliquer pour revenir à leur position précédente. Merci pour l'idée.



36
votes

Mettre la question de Juan dans une réponse, au lieu d'utiliser l'événement de clic, vous devez utiliser l'événement MOUSEDOWN comme suit:

$(document).ready(function()
{
    $('#content')[0].contentEditable=true;

    $('#clickThis').bind('mousedown',function(e)
    {
        console.log(window.getSelection().getRangeAt(0).startContainer);
        e.preventDefault();
    });
});


0 commentaires

0
votes

La Réponse forte> em> est d'ajouter Event.ProventDefault () code> au MouseDown code> événement.

const button = document.getElementById('boldFormat')

button.addEventListener('mousedown', (event) => {
  event.preventDefault() // prevent loss of focus
  document.execCommand('bold', false)
})


0 commentaires