将文本后缀添加到<input type ="number">

Question

我目前有很多这样的输入:

<input type="number" id="milliseconds">

此输入字段用于表示以毫秒为单位的值.但是,我确实有多个数字输入,其值为dB或百分比.

<input type="number" id="decibel">
<input type="number" id="percentages">

我想要做的是在输入字段中添加一个类型后缀,让用户知道输入代表什么样的值.像这样的东西:

(编辑此图像以显示我想要的结果,我也隐藏了输入类型的向上和向下箭头).

我试过谷歌这个,但我似乎无法找到任何关于它.有谁知道这是否可行,以及你如何能够完成这样的事情？

Answer 1

另一个有趣的方法是使用一些 JavaScript 来使后缀真正贴在输入文本上（这可能看起来更好）：

const inputElement = document.getElementById('my-input');
const suffixElement = document.getElementById('my-suffix');


inputElement.addEventListener('input', updateSuffix);

updateSuffix();

function updateSuffix() {
  const width = getTextWidth(inputElement.value, '12px arial');
  suffixElement.style.left = width + 'px';
}


/**
 * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
 * 
 * @param {String} text The text to be rendered.
 * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
 * 
 * @see https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
 */
function getTextWidth(text, font) {
    // re-use canvas object for better performance
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(text);
    return metrics.width;
}

#my-input-container {
  display: inline-block;
  position: relative;
  font: 12px arial;
}

#my-input {
  font: inherit;
}

#my-suffix {
  position: absolute;
  left: 0;
  top: 3px;
  color: #555;
  padding-left: 5px;
  font: inherit;
}

<div id="my-input-container">
  <input type="number" id="my-input" value="1500">
  <span id="my-suffix">ms.</span>
</div>

然而，这只是一个概念证明。您需要进一步处理它以使其可用于生产，例如使其成为可重用的插件。

此外，您将需要处理输入元素溢出的情况。

Answer 2

您可以使用包装<div>在每个输入单元和单元作为一个伪元素位置::after与content您相应的单位.

这种方法适用于绝对定位的伪元素不会影响现有布局.然而,这种方法的缺点是,您必须确保用户输入不像文本字段那么长,否则单元将在上面显示不愉快.对于固定的用户输入长度,它应该工作正常.

/* prepare wrapper element */
div {
  display: inline-block;
  position: relative;
}

/* position the unit to the right of the wrapper */
div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}

/* move unit more to the left on hover
   for arrow buttons will appear to the right of number inputs */
div:hover::after {
  right: 1.5em;
}

/* set the unit abbreviation for each unit class */
.ms::after {
  content: 'ms';
}
.db::after {
  content: 'db';
}
.percent::after {
  content: '%';
}

<div class="ms">
  <input type="number" id="milliseconds" />
</div>
<hr />
<div class="db">
  <input type="number" id="decibel" />
</div>
<hr />
<div class="percent">
  <input type="number" id="percentages">
</div>