Можете ли вы сделать: после стилизации зависимым от значения элемента?

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> является пустым тегом .
Вы, вероятно, хотите использовать атрибут-заполнитель :

<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>

Если вам трудно стилизовать кросс-браузер ползунка диапазона , существует довольно много пакетов, предлагающих стилизованные ползунки диапазона, некоторые из которых можно настраивать.

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.