javascript - 在文本框中自动调整文本

Question

似乎无法在 html 或 JS（甚至可能是 jquery？）中找到这样做。

我有一个文本框，它会在页面下方的输入框中回显输入的任何内容。这个回显框需要自动适应其中的任何文本，这样它就不会在文本之后有这个巨大的空白点。

任何想法如何将输入字段自动适应插入其中的文本？

Answer 1

我想你正在寻找这样的东西：http: //jsfiddle.net/ener3/

$("#in").keyup(function(){
  var tmp = $("<span>")
            .text(this.value)
            .css("font", $("#out").css("font"))
            .appendTo("body"),
      wid = tmp.width();
  tmp.remove();

  $("#out").val(this.value).width(wid);
});

其中#in是输入的 id，#out是您要自动调整大小的文本框。

您可以将其添加到页面的头部，如下所示：

<script type="text/javascript">
$(function(){
    // paste the above code here
});
</script>

确保将脚本标签放在 jQuery 之后：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

You can replace 1.8.3 with the version of jQuery you want to target. I wouldn't recommend using jQuery-latest to start as you'd have to account for potential deprecation where applicable.