javascript - 你能制作 :after styling dependent on the element value? 吗

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 的 ng-model绑定(bind)，或使用自定义的 $filter , 或者观察者在下一个摘要周期更新值

或者您可以只使用 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 时, 因为你想要两位小数，所以你需要输入 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有相当多的软件包提供样式化的范围 slider ，其中一些是可定制的。