Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery masked input plugin. select all content when textbox receives focus

This is a followup question to this question:

select all contents of textbox when it receives focus (Javascript or jQuery)

Basically I am using a textbox in conjunction with the jQuery masked input plugin(Edit: Link may no longer point at relevant version)

When the masked input textbox receives focus I want to select all of the contents of that textbox, but it seems as though having this plugin binded to the textbox prevents that. I was just wondering if there was a way around this.

Below is a sample .html page that demonstrates the issue:

<html>
<head>
    <title></title>
</head>
<body>
    <input id="masktest" type="text" value="01/01/2009" />
    <br />
    <input id="focustest" type="text" value="on focus will select all contents..." />

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.1.pack.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#masktest").mask("99/99/9999");

            // Contents of textboxes will be selected when receiving focus.
            $("input[type=text]")
                .focus(function() {
                    $(this).select();
                });
        });
    </script>
</body>
</html>
like image 304
Jon Erickson Avatar asked Jan 26 '09 19:01

Jon Erickson


2 Answers

I'm the author of the Masked Input Plugin for jQuery. I decided that this should be the default behavior for completed masks and I got it into the latest release. You can read the details here

like image 82
Josh Bush Avatar answered Nov 03 '22 00:11

Josh Bush


Hey Jon, not too sure about the performance of this, but this should work:

    $(function() {


        // Contents of textboxes will be selected when receiving focus.
        $("input[type=text]")
            .focus(function() {
                var mask = "99/99/9999";
                $(this).unmask(mask).select().mask(mask);
            });
    });
like image 25
user59100 Avatar answered Nov 02 '22 23:11

user59100