Question

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

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

如果用户更改了该值，则他们只能更改数值，并且附加的“天”仅是对该字段的可视化 addon 。

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

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>

Answer 2

您可以通过在输入之后简单地插入一个跨度并在输入上应用负的空白边距来降低成本：

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

这样一来，您根本就不会触摸数据，并且数据纯粹是装饰性的。

Answer 3

您可以在输入末尾绝对定位跨度或：after。但是，如果您实际上知道输入的长度，则此功能将更为有用。否则，我将使用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>

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

3 个答案: