jquery - Jquery 拟合文本框的

Question

我试图让用户在一个框中输入的任何内容在第二个框中回显，但第二个框需要锁定到文本大小。有人通过使代码在 JSFiddle 中工作来帮助我，但我需要它在小提琴之外工作。这是我的代码：

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

<style media="screen" type="text/css">
#out{
  width:0;
}
</style>

<script type="text/javascript">
$("#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);
});
</script>


<input type="text" id="in"/>
<input type="text" id="out"/>

这是 JSFiddle 链接以及它真正需要做的事情：http: //jsfiddle.net/ener3/

Answer 1

这 ：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
$("#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);
});
</script>

应该：

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

<script type="text/javascript">
$(function () {
    $("#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);
    });
 });
    </script>