在 HTML 输入中增加数字但不增加字母答案

【问题标题】：Increase numbers but not letters in HTML input在 HTML 输入中增加数字但不增加字母
【发布时间】：2020-03-30 09:07:40
【问题描述】：

我有一个问题，我想输入一个可以同时接受数字和字母的输入。我希望能够只增加和减少数字，但保持字母不变，并且用户不能删除字母。如下图：

仅输入数字和字母：

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

有没有更好的办法？

【问题讨论】：

您只想增加和减少数字，而不是mm。但是请告诉你你是怎么做的position: absolute
答案是正确的，但它们都是一种解决方法。没有一个是优雅/标准的解决方案。
我认为你应该继续你自己的方法。
我很理解你的问题！我认为您需要 javascript 代码来检测数字的长度！！！！你用反应吗？
我使用的是 JQuery，但我认为 CSS 有办法而不是使用 Javascript。

标签： html css input letter

【解决方案1】：

在下面查看我的解决方案：

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

【讨论】：

【解决方案2】：

你可以这样做：

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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

这是我已经做的，整个事情就是让数字和字母彼此相邻并锁定完全相同。写 1 个数字或数百个。

【解决方案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>

【讨论】：