Question

I am trying to have whatever a user types in one box echo in a second box but that second box needs to lock to the text size. Someone helped me by making the code work in JSFiddle but I need it to work outside of fiddle. This is my code:

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

This is the JSFiddle link and what it really needs to do: http://jsfiddle.net/ener3/

Answer 1

this :

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

Should be:

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