Wie kann ich ein Platzhalter-Zeichen auf einem Eingabefeld halte mit kantigem Material Design

bei dem obigen Bild Suchen können Sie durch Hinzufügen eines Platzhalter-Attributs zu einem Material Design/Schräg Richtlinie ein Dollarzeichen ($) hinzufügen. Wenn Sie sich auf die Eingabe konzentrieren und Text hinzufügen, verschwindet das Dollarzeichen. Gibt es einen Weg in CSS oder anders, wo ich das Dollarzeichen behalten kann?

<md-input-container > 
    <label>Tens ($10.00's)</label> 
    <input name="tens" ng-model="data.tens" placeholder="$"> 
    </md-input-container>

Quelle

2016-05-03 Coded Container

haben sie versucht, etwas außerhalb des Eingangs das Dollarzeichen setzen? Entweder das oder mach es zu einem 'ng-Modell', aber das ist wahrscheinlich nicht die beste Idee. –

Das ist das normale Verhalten für einen Platzhalter. Vielleicht suchst du eine Maske. – marcosspn

Ich denke, diese Antwort erklärt, warum Sie das nicht können und warum sollten Sie nicht: http://stackoverflow.com/questions/29817834/how-do-i-add-permanent-place-holder-inside-in- Input-Filed – oguzhan00

Vielleicht können Sie versuchen, ng-change, fügen ng-change = "change()" zur Eingabe

$scope.change = function() { 
    if ($scope.data.tens === "$") { 
     $scope.data.tens = ""; 
    } 
    else if (!$scope.data.tens.startsWith('$')) { 
     $scope.data.tens = '$' + $scope.data.tens; 
    } 
};

Quelle

2016-05-03 17:50:16 solosodium

Je nachdem, wie Sie mit Ihrem ng-model Sie das machen können Dollarzeichen ein Teil davon - nur sicherstellen, dass der Benutzer das Zeichen nicht löscht.

<input name="tens" ng-model="data.tens">

einen Beobachter zu Zehn hinzufügen

$scope.$watch('tens', function (newValue, oldValue) { 
     if(newValue.length ==0){ 
     $scope.tens = $; 
     } 
});

Quelle

2016-05-03 17:52:58

Ich bekomme einen Fehler, der sagt, "kann Eigenschaft 'Länge' von undefined nicht lesen" –

@CodedContainer, was bedeutet, dass newValue wahrscheinlich Null ist. Beginnen Zehner mit einem Wert? Instanziieren Sie es als eine leere Zeichenfolge –

Ich möchte den Wert nicht als eine leere Zeichenfolge starten, weil ich möchte, dass der Benutzer weiß, dass die Eingabe als ein monetärer Wert hinzugefügt werden soll. –

Während viele Menschen mit Masken oder Javascript vorgeschlagen haben, wenn das, was Sie suchen eine Platzhalter -ähnlichen Option ist, werde ich auch hinzufügen dass Sie CSS verwenden können, um das Gleiche zu tun.

CSS:

.dollar-sign-icon 
{ 
    position: relative; /* adjust top and right to fit context */ 
} 

.dollar-input 
{ 
    padding-left: 30px; 
}

HTML:

<md-input-container> 
    <label>Tens ($10.00's)</label> 
    <i class="dollar-sign-icon">$</i> 
    <input class="dollar-input" name="tens" ng-model="data.tens" placeholder="$"> 
</md-input-container>

Quelle

2016-05-03 18:10:48

Wie kann ich ein Platzhalter-Zeichen auf einem Eingabefeld halte mit kantigem Material Design

Antwort

Verwandte Themen