Question

I have a little jQuery function that is meant to automatically select text in an asp.net text box when it gets focus. However, the text in the text box gets selected, but immediately then deselects.

The code works if i bind to the focus event with .focus(function()) but I am adding the text boxes to the page dynamically which is why I think I need to use the live event.

Can anyone see a problem? The text boxes in question are in Item templates of two gridviews inside a multiview if that makes a difference?

Code:

<script type="text/javascript">

    //Select all text in Cost Rate Text Boxes when they have focus
    $(document).ready(function () {
        $(".CostRateTextBox").live('focus', function () {
            $(this).select();
        });

    });

</script>

Edit:

<script type="text/javascript">

    //Select all text in Cost Rate Text Boxes when they have focus
    $(document).ready(function () {
        $(".CostRateTextBox").live('focus', function () {
            $(this).select();
            preventDefault();
        });

    });

</script>

Answer 1

It seems to be the mouseup event interfering. You’ll notice if you click and hold in the form field then move outside of it to “mouseup” the selection sticks. Using mouseup instead of focus to trigger the select() method seems to work well:

<script type="text/javascript">

    //Select all text in Cost Rate Text Boxes when they have focus
    jQuery(function($){
        $("table.demo").on("mouseup", ".CostRateTextBox", function () {
            $(this).select();
        });
    });

</script>

Demo: jsfiddle.net/gableroux/jvJzX/12

See original demo for jQuery 1.3 – 1.8 compatible code.