web-dev-qa-db-ja.com

<input type = "number">にテキストサフィックスを追加します

私は現在、このような多くの入力を持っています：

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

この入力フィールドは、ミリ秒単位で値を表すために使用されます。ただし、dBまたはパーセンテージの値を取る複数の数値入力があります。

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

入力フィールドに型接尾辞を追加して、入力が表す値の種類をユーザーに知らせることです。このようなもの：

enter image description here

（この画像は、どのような結果が欲しいかを示すために編集されています。また、入力タイプから上下の矢印を隠しました）。

私はこれをグーグルしようとしましたが、それについて何も見つけられないようです。これが可能かどうか、そしてこのようなことをどのように達成できるかを誰もが知っていますか？

htmlcsshtml5inputsuffix
9
R. De Caluwe

各入力要素にラッパー<div>を使用し、対応するユニットのcontentを使用して、ユニットを擬似要素 ::after として配置できます。

このアプローチは、絶対配置された擬似要素が既存のレイアウトに影響しない場合に有効です。それにもかかわらず、このアプローチの欠点は、ユーザー入力がテキストフィールドほど長くないことを確認する必要があることです。そうしないと、ユニットが上に不快に表示されます。ユーザー入力の長さが固定されている場合、正常に機能するはずです。

/* 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>
17
andreas

もう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>

ただし、これは概念実証にすぎません。生産準備を整えるには、もう少し作業する必要があります。再利用可能なプラグインにします。

また、入力要素がオーバーフローするケースを処理する必要があります。

3
Slava Fomin II

入力に要素を追加するオプションがある場合は、これを試すことができます-

<div class="container">
  <input type="text" id="milliseconds">
  <span class="ms">ms</span>
</div>

.container {
  max-width: 208px; /*adjust it*/ 
  margin: auto;
  position: relative;
  display: inline-block;
}

#milliseconds {
  padding-right: 35px;
}

.ms {
 position: absolute;
 top: 0;
 right: 10px;
}
0
Akanksha Sharma