如何使用Angular Material Design在輸入字段上保留占位符字符

Question

查看上圖，您可以通過向Material Design / Angular Directive添加占位符屬性來添加美元符號（$）。 當您專注於輸入並添加文本時，美元符號會消失。 CSS中有沒有辦法可以保留美元符號？

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

Answer 1

也許你可以嘗試ng-change ，添加ng-change =“change（）”來輸入

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

Answer 2

根據您使用ng-model您可以將美元符號作為其中的一部分 - 只需確保不讓用戶刪除該字符。

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

添加一個觀察者到十

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

Answer 3

雖然很多人建議使用掩碼或Javascript，但如果您正在尋找的是類似於占位符的選項，我還會補充說您可以使用CSS來執行相同操作。

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>