AngularJS und Text-Winkel: Ändern CSS-Style für die Eingabe Platzhalter

Question

auf Wiki-Seite von Text-Winkel Github-Projekt, sagt es:

https://github.com/fraywing/textAngular/wiki/Styling-the-Editor

ich mit diesem Code versucht:

<div text-angular="text-angular" ta-toolbar="[]" ng-model="message" 
     placeholder="<div class='placeholder'>Write Coment...</div>"></div> 

Aber der Bildschirm wird angezeigt als: placeholder show as raw html

Ich habe das folgende nach einem Blick auf diese Website versucht: https://css-tricks.com/almanac/selectors/p/placeholder/

::-webkit-input-placeholder { color: red; } 

Es hat immer noch nicht funktioniert. Wie kann ich meinem Eingabeplatzhalter benutzerdefinierte Stile geben?

Answer 1

ich einen Weg, um mich .. fand die Antwort Teil auf andere ähnliche Fragen stehen abzulassen, wähle ich Antwort hier statt Bearbeitung ursprüngliche Frage zu stellen.

Verwenden Sie die Platzhalter-Textklasse. Es handelt sich nicht um eine benutzerdefinierte Klasse, sondern um die temporäre Klasse, die von text-angular verwendet wird, wenn Platzhalter angezeigt werden.

.ta-bind { 
&.placeholder-text { 
    color: red; 
} 
&:not(.placeholder-text) { 
    color: black; 
} 
} 

(Beispiel in SCSS ist, denken Sie daran, verdeckte, wenn Sie CSS verwenden)

Answer 2

placeholders sollte mit Eingabeelementen und nicht auf divs verwendet werden. Wahrscheinlich müssten Sie Ihre div-Tags in inputs ändern.

Sie hatte die richtige Idee über einen Platzhalter Styling, aber Sie können die Anbieter Präfixe je nach verwendetem Browser

Chrome, Safari, Opera, Rand) anpassen müssen: :: - Webkit-input-Platzhalter

Firefox 4 bis 18: -moz-Platzhalter (Nur ein Doppelpunkt)

Firefox 19+: :: - moz-Platzhalter (zwei Doppelpunkte)

IE 10 und IE 11: -ms-input-Platzhalter

/* Chrome, Safari, Opera and Edge */ 
 
::-webkit-input-placeholder { color: red; } 
 
/* Firefox 4 through 18 */ 
 
:-moz-input-placeholder { color: red; } 
 
/* Firefox 19+ */ 
 
::-moz-input-placeholder { color: red; } 
 
/* IE10 and IE11 */ 
 
:-ms-input-placeholder { color: red; }

<input placeholder="Content here" />

Eine andere Sache, die Sie könnten versuchen, ist eine contenteditable Eigenschaft zu Ihrem div anhängen, die sie verhalten sich wie eine Art ein machen Eingabeelement Sie können dann eine Dateneigenschaft festlegen, um das Verhalten eines Platzhalters zu simulieren.

Verwenden Sie den Pseudo-Selektor before, der das div nur dann anvisiert, wenn es leer und nicht fokussiert ist.

[contenteditable=true]:empty:not(:focus):before{ 
 
    content:attr(data-text); 
 
    color: red; 
 
} 
 

 
div { 
 
    border: 1px solid black; 
 
}

<div contenteditable="true" data-text="Enter text here"></div>