在 HTML 输入中增加数字而不是字母

Question

我遇到了这个问题，我想要一个可以同时接受数字和字母的输入。我希望能够只增加和减少数字，但保持字母不变，而且用户不能删除字母。喜欢下图：

只输入数字和字母：

我有一个解决方法，将 <span>mm</span> 放在数字旁边，使用 position: absolute;。

有什么更好的方法吗？

Answer 1

你可以通过固定容器的宽度来做到这一点

HTML :

<div class="input__container">
  <input type="number" class="input" />
  <span class="input__text">mm</span>
</div>

CSS :

.input__container{
  position:relative;
  width:60px;
}
.input{
  position:absolute;
  width:100%;
}
.input__text{
  position:absolute;
  top:50%;
  tranform:translateY(-50%);
  right:10px;
}

码笔：https://codepen.io/abdelhedi/pen/JjodrRq

Answer 2

检查下面我的解决方案：

.input-num {position: relative;}
.input-num span { position: absolute; left: 18px;}

<div class="input-num">
  <input value="50" type="number" name="quantity" min="10" max="99">
  <span>mm</span>
</div>

Answer 3

你可以这样做：

div {
  display: inline-block;
  position: relative;
}

div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}

div:hover::after,
div:focus-within::after {
  right: 1.5em;
}

.ms::after {
  content: 'mm';
}

<div class="ms">
  <input type="number" id="milliseconds" />
</div>

Answer 4

另一种方法：文本对齐、填充和来自可重用的通用结构的伪造，其中单元可以更新。

可能的布局：

* {
  padding: 0;
  margin: 0;
}


/* 101*/

[data-unit] {
  font-family: courier;  /* use a font to master size and letter spacing */
  font-size: 1.25rem;
  letter-spacing: 0.05em;
}

[data-unit]::after {
  content: attr(data-unit);
  margin-left: -1.5em;  /* fits to font-family:courier; */
}

[data-unit] [type="number"] {
  font-size: 1.25rem;
  text-align: right;
  padding-right: 1.8em;  /* fits to font-family:courier; */
}


/* makup */

[data-unit] {
  box-sizing: border-box;
  display: flex;
  width: max-content;
  padding: 0.5em;
  background: lightblue;
  margin: 1em;
  border: outset;
  align-items: center;
}

[data-unit]::after {
  font-weight: bold;
}

only style data-unit attributes boxes.
<div data-unit="mm">
  <input type="number" value="0" />
</div>

<div data-unit="km">
  <input type="number" value="0" />
</div>

<div data-unit="cm">
  <input type="number" value="0" />
</div>
regular untouched
<div>
  <input type="number" value="0" />
</div>

在 HTML 输入中增加数字而不是字母

Increase numbers but not letters in HTML input

html

css

input

letter