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绑定，或使用自定义的$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时，由于要输入2个小数，因此您需要输入2000，但这很直观。

或者，您可以将其与范围输入结合使用，以提供更友好的UX。我还与听众一起玩，以提供更多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。

您可以：在样式之后取决于元素值吗？

2 个答案: