Jquery拟合文本框的

时间:2013-01-21 18:40:15

标签: jquery html

我试图让用户在第二个框中输入一个框回显,但第二个框需要锁定文本大小。有人通过在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/

1 个答案:

答案 0 :(得分:4)

这个:

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