Firefox Bug With Paste + Dynamically Resized Textbox

I am having an issue with FF (surprisingly, IE works) with pasting into a dynamically-resized textbox (using a text shadow).

http://pastebin.com/ZzbQdSh7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
  <title>Firefox Paste + Dynamically Resized Textbox Bug</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  <script type="text/javascript">
    $(function() {
        // update initially
        update();

        // bind
        $("#txt").bind('keyup keydown', function(e) {
            update();
        });
    });

    function update() {
        // create hidden element
        var width = $("#shadow").text($("#txt").val() + ">:)").width();

        // update width
        $("#txt").width(width);
    }
  </script>
  <style type="text/css">
    #wrapper { width: 200px; padding: 5px; border:1px; }
    #txt { background: red; color: white; width: 1em; }
    #shadow { display: none; }
  </style>
</head>   
<body>
    <p>Try pasting a value in the textbox. IE will work, FF will act like the width didn't change but still update the width properly. If you use FireBug to change any CSS properties, it will update itself.</p>
    <div id="wrapper">

        <input type="text" id="txt" value="" />
        <br /><span id="shadow">&gt;:)</span>
    </div>
</body>
</html>

For the life of me, I've tried making it update its layout and I can't get it to work correctly.

ansaurus

tags:

views:

answers:

Firefox Bug With Paste + Dynamically Resized Textbox

related questions