Добавить текст в поле ввода без изменения его значения? - PullRequest
Новая
       7

Добавить текст в поле ввода без изменения его значения?

0 голосов
/ 16 января 2019

У меня есть поле ввода с типом «число», но я хочу добавить текст «дней» в значение этого поля ввода без изменения фактического значения, которое выходит из него. 

<input type="number" class="days" (keyup)="valueChanged($event)"/>

Если пользователь изменяет значение, он должен иметь возможность изменять только числовое значение, а добавленные «дни» являются только визуальными аддон к этому полю.

Есть ли способ сделать это в CSS или TypeScript / JS?

Ответы [ 3 ]

0 голосов
/ 16 января 2019

Вы можете абсолютное положение диапазона или: после в конце ввода. Это более полезно, если вы знаете длину ввода. В противном случае я бы использовал JS для вычисления ширины ввода и добавления его. 

.wrapper {
  display: inline-block;
  border: 1px solid gray;
  position: relative;
  font-family: Arial;
  font-size: 1rem;
}

.wrapper:after {
  content: 'kg';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: .5rem;
  pointer-events: none;
}

input {
  width: 4rem;
  padding: .5rem;
  border: none;
  box-sizing: border-box;
  display: block;
  font-size: 1rem;
}
<div class="wrapper">
  <input type="text" value="100">
</div>
0 голосов
/ 16 января 2019

Вместо того, чтобы вставлять единицу во вход, почему бы не иметь особый стиль ввода для этих сценариев, где вы можете добавить или добавить любую единицу. Что-то вроде: 

.unit-input {
  border: #DFDFDF solid 1px;
  display: inline-flex;
  border-radius: 4px;
  overflow: hidden;
  font-family: sans-serif;
  width: 10em;
}

.unit-input__input {
  border: 0;
  padding: .5em;
  font-size: 1em;
  width: 100%;
}

.unit-input__input:focus {
  background: #EDFFFB;
  outline: none;
}

.unit-input__prepend,
.unit-input__append {
  background: #F4F4F4;
  padding: .5em;
  border: #DFDFDF solid 0;
  flex-grow: 0;
}

.unit-input__prepend {
  border-right-width: 1px;
}

.unit-input__append {
  border-left-width: 1px;
}
<p>
  <span class="unit-input">
    <input class="unit-input__input" type="number">
    <span class="unit-input__append">days</span>
  </span>
</p>

<p>
  <span class="unit-input">
    <span class="unit-input__prepend">$</span>
    <input class="unit-input__input" type="number">
  </span>
</p>

<p>
  <span class="unit-input">
    <input class="unit-input__input" type="number">
    <span class="unit-input__append">kg</span>
  </span>
</p>
0 голосов
/ 16 января 2019

Вы можете сделать это несколько дешевле, просто вставив диапазон после ввода и применив отрицательное поле справа к входу: 

<input type='number' style='margin-right: -10em;'><span>days</span>

Таким образом, вы вообще не касаетесь своих данных, и они остаются чисто косметическими.

...