Rückkehr Fokus nach Contenteditable nach ExecCommand?

Ich habe den folgenden Code demonstriert zufrieden stellende Eigenschaft und eine Schaltfläche, die Fett in den Absatz mit contenteditable Bereich einfügen wird. Meine Frage ist, wie man den Fokus dorthin zurückbringt, wo ich aufgehört habe, nachdem ich auf Fett geklickt habe, wenn man einen Text hervorhebt, und auf fett klickt, er wird diesen Text fett formatieren, aber der Fokus wird nicht mehr da sein. Dasselbe passiert, wenn Sie nichts auswählen und auf Fett klicken, der Fokus wird weg sein und wenn Sie dort klicken, wo Sie aufgehört haben, können Sie fett formatierte Texte eingeben.Rückkehr Fokus nach Contenteditable nach ExecCommand?

Vielen Dank für Ihre Hilfe!

<head> 
    <style type="text/css"> 
    #container{ 
     width:500; 
    } 
    .handle{ 
     float:left; 
    } 
    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
    $(function(){ 
     $('#bold').click(function(){ 
      document.execCommand('bold', false, true); 
     }); 
    }); 
    </script> 
</head> 
<button id="bold">Bold</button> 
<div id="container"> 
<div class="c"><p contenteditable>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div> 

<div class="c"><p contenteditable>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div> 
</div>

Quelle

2009-08-22 FurtiveFelon

Sie können die zuletzt angeklickten Artikel in einer Variablen speichern möchten, und rufen Sie dann .focus() auf sie nach dem .execCommand ausgeführt wurde. Etwas Ähnliches, ich denke:

$(function(){ 
     $('p.editable').click(function() { 
      var clickedItem = $(this); 
      clickedItem.attr('contenteditable', true).focus(); 
      $('#bold').click(function(){ 
        document.execCommand('bold', false, true); 
        clickedItem.focus(); 
      }); 
     }); 
    });

Auf diese Weise können auch die "contenteditable" Attribut aus dem Markup entfernen ...

HTH

Quelle

2009-09-11 11:55:14 ALFABreezE

Dadurch wird die Aktion jedes Mal, wenn Sie auf einen Absatz klicken, mit dem Klickereignis '# bold' verknüpft, wodurch der Handler mehrmals gebunden wird. Das willst du nicht. – Jake

Die Klasse ".editable" wurde hinzugefügt, sodass sie nur an einen Absatz mit der im Markup angegebenen Klasse bindet. – ALFABreezE

Jedes Mal, wenn Sie auf eine p.editable klicken, wird ein Handler an #bold gebunden. Wenn Sie auf #bold klicken, werden alle diese Befehle ausgelöst, was dazu führt, dass execCommand mehrmals ausgeführt wird und der Fokus auf allen p.editables liegt, auf die geklickt wurde. Die Antwort, die devongovett gab, leidet nicht unter diesem Problem, weil der # bold-Handler nur einmal gebunden wird. – Jake

HTML:

<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>

JavaScript:

function doRichEditCommand(aName, aArg){ 
    getIFrameDocument('editorWindow').execCommand(aName,false, aArg); 
    document.getElementById('editorWindow').contentWindow.focus() 
}

finden diese Ihnen helfen können:

https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla

Quelle

2009-09-16 14:55:00

Sie können nur die jQuery .focus() Funktion verwenden es zu fokussieren. Dies sollte funktionieren:

var current; 
$(function(){ 
    $("p[contenteditable]").focus(function() { 
     current = this; 
    }); 

    $('#bold').click(function(){ 
      document.execCommand('bold', false, true); 
      $(current).focus(); 
    }); 
});

Dies hält nur den Überblick über die zur Zeit jedes Mal, es fokussiert wird vom Benutzer der Bearbeitung Feld, und wenn die Schaltfläche Fett wird in dieses Feld Fokus geklickt wird zurückgesetzt.

Quelle

2009-11-27 00:37:28 devongovett

SIE SOLLTEN .contents NUTZEN()

var current; 
$(function(){ 
    $("p[contenteditable]").focus(function() { 
     current = this; 
    }); 

    $('#bold').click(function(){ 
      document.execCommand('bold', false, true); 
      $(current).contents().focus(); 
    }); 
});

Quelle

2010-07-22 02:56:35 fukid

danke, das hilft! –

Warum der .contents() Aufruf? – xec

Ich weiß nicht, warum '.contents()' benötigt wird, aber es funktioniert, während '.focus()' nicht direkt aufruft. Fukid, kannst du es erklären? – FeifanZ

Wenn Sie in einem Iframe sind, dann rufen Sie Fokus() auf der Standardansicht.

Quelle

2012-01-18 00:29:08

Rückkehr Fokus nach Contenteditable nach ExecCommand?

Antwort

Verwandte Themen