Platzhalter in contenteditable - Fokus-Event-Problem
Ich habe versucht, diese Fragen vor, ohne Glück zu erklären/beweisen, dass es ein Beispiel wo der Fehler passiert. So, hier ist ein Versuch:
Ich versuche zu replizieren, die ein Platzhalter-Effekt auf eine contenteditable DIV. Das Konzept ist im Kern einfach:
<div contenteditable><em>Edit me</em></div>
<script>
$('div').focus(function() {
$(this).empty();
});
</script>
Diese können sometomes Arbeit, aber wenn die Platzhalter-HTML enthält, oder wenn es eine andere Bearbeitung gemacht, die editierbaren DIV-text-caret-Zeichen wird entfernt, und der Benutzer muss klicken Sie erneut auf die editierbaren DIV zu können, beginnen Sie mit der Eingabe (auch wenn es sich noch im Fokus):
Beispiel: http://jsfiddle.net/hHLXr/6/
Kann ich nicht verwenden, eine Fokus-trigger in der hf, da wird es erstellen Sie eine event-Schleife. Also ich brauche einen Weg, um re-setzen Sie die Einfügemarke cursor in den bearbeitbaren DIV, oder in irgendeiner anderen Art und Weise neu zu konzentrieren.
InformationsquelleAutor der Frage David | 2012-02-01
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie manuell aktualisieren Sie die Auswahl. Im IE, das focus-Ereignis ist es zu spät, also würde ich vorschlagen, die
activate
Veranstaltung statt. Hier ist etwas code, der die Arbeit tut, die in allen gängigen Browsern, einschließlich IE <= 8 (die eine CSS-only-alternative nicht):Live-demo: http://jsfiddle.net/hHLXr/12/
Code:
InformationsquelleAutor der Antwort Tim Down
Hier ist eine CSS-Lösung nur verstärkt einige der anderen Antworten:-
EDIT: Hier ist mein snippet auf codepen -> http://codepen.io/mrmoje/pen/lkLez
EDIT2: beachten Sie diese Methode funktioniert nicht 100% für multi-line-Anwendungen aufgrund der restlichen
<br>
Elemente zu zeigen, die in das div nach der Durchführung einerselect-all-cut
oderselect-all-delete
auf allen Linien. Credits:- @vsyncRückschritt scheint gut zu funktionieren (zumindest auf webkit/blink)
InformationsquelleAutor der Antwort moje
Ich habe gerade veröffentlicht ein plugin für das.
Es verwendet eine Kombination von CSS3 und JavaScript zum anzeigen der Platzhalter ohne die Inhalte der
div
:HTML:
CSS:
JS:
Und das ist es.
InformationsquelleAutor der Antwort Craig Stuntz
nur mithilfe von css-pseudo-Klassen.
InformationsquelleAutor der Antwort amwinter
Fand ich, dass der beste Weg, dies zu tun, ist die Verwendung der
placeholder
- Attribut wie üblich, und fügen Sie ein paar Zeilen CSS.HTML
CSS
Hinweis: die CSS -
:empty
Selektor funktioniert nur, wenn es gibt buchstäblich nichts in zwischen dem öffnenden und dem schließenden tag. Dies beinhaltet neue Zeilen, Tabulatoren, Leerzeichen, etc.Codepen
InformationsquelleAutor der Antwort ramo
Alles, was Sie brauchen, ist dieser kleine Lösung
Demo: http://codepen.io/flesler/pen/AEIFc
InformationsquelleAutor der Antwort wp student
Hier ist mein Weg:
Es verwendet eine Kombination von jQuery und CSS3. Funktioniert genau wie das html5-placeholder-Attribut!.
HTML:
CSS3:
jQuery:
DEMO: http://jsfiddle.net/Tomer123/D78X7/
InformationsquelleAutor der Antwort surfs up
Hier ist die Korrektur, die ich verwendet.
Entwickelte ich ein jQuery-plug-in für diese. Werfen Sie einen Blick https://github.com/phitha/editableDiv
InformationsquelleAutor der Antwort Phitha
InformationsquelleAutor der Antwort thecodeparadox
Dies ist nicht genau die Lösung deines Problems ..
in summernote Optionen eingestellt
Platzhalter funktioniert in dieser Weise.
InformationsquelleAutor der Antwort Ganesh S