您可以根据元素值制作 :after 样式吗？

Question

我想对数字输入字段做一些动态样式，所以我把它放在一个 span 元素中，这样我就可以添加非数字字符：

<span class='formatter'>
    <input type='number'>0.00</input>
</span>

然后，在css中：

.formatter:after {
    position: absolute;
    content:"%";
    top: 12px;
}

这可行，% 出现，但我希望它出现在输入值之后。所以，我可以使用 left: 200px;将 % 推到输入字段的末尾，但我希望它出现在数字本身之后，无论是 0.00 还是 100.00。有没有办法将内容位置与输入值联系起来？

Answer 1

首先，您的标记无效：<input> 是 void tag。
你可能想使用placeholder attribute:

<input placeholder="0.00%">

至于掩蔽，它并不像看起来那么容易。您可以编写自己的指令，但需要考虑以下几点：

• 如果您想在其中显示非数字（和与数字相关的字符），您的输入必须是 type="text" 而不是 number

或者你可以只使用 angular-input-mask 包，它是为屏蔽 angular.js 中的输入而设计的：

<input type="text"
       placeholder="0.00%"
       ng-model="number" 
       ui-percentage-mask="2" 
       ui-percentage-value
       ui-hide-space
>

---

工作示例：

var app = angular.module('app', ['ui.utils.masks']);
app.controller('testController', ['$scope', function($scope) {
  $scope.number = 100;
}])

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-input-masks/4.2.1/angular-input-masks-standalone.min.js"></script>

<div ng-app="app" ng-controller="testController">
  <input type="text"
         placeholder="0.00%"
         ng-model="number" 
         ui-percentage-mask="2" 
         ui-percentage-value
         ui-hide-space
   >
 </div>

缺点是当您输入20 时，因为您需要2 个小数，您需要输入2000，但这有点直观。

---

或者，您可以将其与范围输入结合使用，以提供更友好的用户体验。我还与听众玩了一些，以提供更多type="number" 的感觉，但您可以完全放弃它：

app = angular.module('app', ['ui.utils.masks']);

/* 
 * You don't really need any of the controller code below. 
 * I just fooled around binding keydown events to experiment making 
 * the input[type="text"] feel more like [type="number"].

 * If you don't want it, simply use...

app.controller('testController', () => [])

 * ... or delete it altogether and remove `ng-controller`
 * attribute from [ng-app] element.
 */

app.controller('testController', ['$scope', '$element', '$timeout', function($s, $e, $t) {
  this.$onInit = function() {
    // binding $scope.number changes on up/down/pageUp/pageDb
    $e.on('keydown', 'input', (e) => {
      if ([38, 40, 33, 34].includes(e.keyCode)) {
        e.preventDefault();
        e.stopImmediatePropagation();
        if ([38, 40].includes(e.keyCode))
          $s.number += e.keyCode === 38 ? .1 : -.1;
        else
          $s.number += e.keyCode === 33 ? 1 : -1;
        $t(() => $s.$apply());
        return false;
      }
    })
  };
}]);

input-wrapper {
  position: relative;
}
input-wrapper [type="text"]{ 
  font-size: 2rem;
}

input-wrapper [type="range"] {
  position: absolute;
  top: calc(100% - .5rem);
  left: -2px;
  width: 100%;
  opacity: 0;
  padding: 1rem 0;
  transition: opacity .25s cubic-bezier(.5, 0, .3, 1);
}

input-wrapper:hover [type="range"],
input-wrapper input:focus~[type="range"],
input-wrapper input:active~[type="range"],
input-wrapper [type="range"]:focus,
input-wrapper [type="range"]:active {
  opacity: 1;
}

input-wrapper [type="text"] {
  position: relative;
  z-index: 1;
}

p {
  padding-top: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-input-masks/4.2.1/angular-input-masks-standalone.min.js"></script>

<div ng-app="app" ng-controller="testController">
  <input-wrapper>
    <input type="text" placeholder="0.00%" ng-model="number" ui-percentage-mask="2" ui-percentage-value ui-hide-space>
    <input type="range" ng-model="number" min="0" max="100" step="0.01">
  </input-wrapper>
  <p>Use Up/Down/pageUp/pageDn on a focused input
</div>

如果你觉得style the range slider cross-browser 很困难，有很多包提供样式化范围滑块，其中一些是可定制的。

Answer 2

我会放弃 css :after 属性并编写如下内容：

<div class="formatter">
    <input type="number" ng-model="$ctrl.number">0.00</input>
    <span ng-if="$ctrl.number <= 100" class="pretty_percentage">%</span>
</div>

然后自定义pretty_percentage css。