html - 将文本附加到输入字段而不更改其值？

Question

我有一个类型为“数字”的输入字段，但我想在该输入字段值内附加文本“天”而不更改从中产生的实际值。

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

如果用户更改值，他们应该只能更改数值并且附加的“天”只是该字段的视觉插件。

有没有办法在 CSS 或 TypeScript/JS 中做到这一点？

标签： htmlcsstypescriptinput

Answer 1

与其将单元插入输入，为什么不为这些场景使用特定样式的输入，您可以在其中附加或预先添加任何单元。就像是：

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