Wie wollen Sie vermeiden, verlieren Sie den Fokus auf eine contenteditable-element, wenn ein Benutzer klickt außerhalb dieses element?

Möchte ich verhindern, dass eine contentEditable Bereich verlieren den Fokus, wenn ein Klick gemacht wird, außerhalb dieses Gebietes. Einige Beispiel-HTML sieht wie folgt aus:

<div id="content">
    <p>Hello</p>
</div>
<div id="clickThis">
    <p>If you click on this or anywhere for that matter after focusing on Hello, you lose your focus on Hello</p>
</div>

Javascript-Beispiel sieht wie folgt aus:

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

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

Wenn Sie klicken Sie auf die #clickThis div oder irgendwo außerhalb der #content div, verlieren Sie den Fokus auf die #content div, auch wenn Sie nennen das click-event preventDefault Funktion.

Darüber hinaus wird das Programm verpasst dem moment das click-Ereignis ausgelöst, so kann ich nicht einfach zurück zur vorherigen Auswahl nach dem Klick stattgefunden hat. Gibt es eine Möglichkeit, halten Sie den cursor positionieren und zu fokussieren, nach einem Klick erscheint?

Dank.

jsFiddle: http://jsfiddle.net/VivekVish/FKDhe/4/

Nun, ich weiß, es ist möglich, in jeditable, wenn Sie es vorziehen, verwenden Sie das plugin, es würde Ihnen auch viel mehr power appelsiini.net/projects/jeditable
Meine Bedürfnisse sind super bestimmten. Ich habe ein vollständiges WYSIWYG schon. Es wäre schwer zu gehen zurück. Danke für den Vorschlag aber. Wie genau tun Sie es in jeditable? Wenn Sie es erklären könnte, vielleicht kann ich replizieren der Funktionalität.
Es ist eine option, die Sie passieren würden, onblur: none, und vielen Dank für die nicht rippen meinem Kopf ab, für das Angebot eine andere Lösung des Problems 😉
Versuchen Sie das mousedown-Ereignis, vielleicht ist der Bereich noch nicht ändern bei der Veranstaltung
Vielen Dank, Juan. Das funktionierte perfekt. Verhindern Standard für mousedown Tat es. Bitte stellen Sie Ihren Kommentar eine Antwort, so dass ich Sie akzeptieren kann. Und nochmals vielen Dank für die Ideen, mazzzzz. Ich habe es nicht ausprobiert. Vielleicht funktioniert es noch.

InformationsquelleAutor Deets McGeets | 2011-09-12

  1. 32

    Setzen Juans Frage zu einer Antwort, anstatt das click-Ereignis, verwenden Sie das mousedown-Ereignis wie folgt:

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

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

    Können Sie sehen, es arbeiten hier:

    http://jsfiddle.net/FKDhe/7/

    InformationsquelleAutor Deets McGeets

  2. 0

    versuchen Sie $('#content').focus(); nach e.preventDefault();
    es ist keine perfekte Lösung, da springt es an den Anfang, aber versuchen Sie es.

    sowieso, sind Sie sicher, dass es eine gute Idee, um den Benutzer zu zwingen zurück zu diesem Bereich? 🙂

    In meinem Fall, ja. Die gesamte Anwendung ist ein WYSIWYG-editor und klickt der Benutzer auf eine Symbolleisten-verfehlt aber eine Schaltfläche, die Sie klicken müssen, um auf den Inhalt der position, die Sie vorher waren und dann klicken Sie auf die Schaltfläche in der Symbolleiste wieder. Die $('#content').focus() Lösung leidet auch unter diesem problem, obwohl. Das heißt, Sie klicken müssen, um wieder in Ihre Vorherige position. Danke für die Idee.
    Ich sehe deinen Punkt, es ist ein bisschen komplizierter dann..

    InformationsquelleAutor szajmon

Schreibe einen Kommentar