如何使用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>