javascript - 入力の幅を no にする方法。言葉の価値？

Question

私の値がxyzの場合

入力の幅 = 100% は必要ありません 入力の値に含まれる単語の数に合わせて入力の幅が自動的にサイズ変更されるようにします。

Answer 1

少しハッキーですが、次のことがそれを行うための1つの可能な方法であることがわかりました。

サンプルマークアップ：

<input />
<span id="input-width-helper"></span>

css：

input {
  min-width: 20px;
  width: 20px;
}

#input-width-helper {
  position: absolute;
  visibility: hidden;
  /* extra styles would be needed, if the input has other styles
     affecting it's font, width, etc. */
}

js：

$('input').on('keydown', function () {
  var
    $this = $(this),
    $helper = $('#input-width-helper');

  setTimeout(function () {
    // the '+ 10' here is arbitrary to account for paddings/borders
    // if the hidden helper ('#input-width-helper') is styled correctly,
    // this could probably be removed
    $this.css('width', $helper.text($this.val()).width() + 10); 
  }, 0);
});

デモ： http： //jsbin.com/aqakus/3/

注：もちろん、これは複数の入力を処理するために熟知している必要があります！