Home/ Questions/Q 8149267
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T14:48:59+00:00

I am trying to attach onBlur and onFocus handler to a SSN input field.

  • 0

I am trying to attach onBlur and onFocus handler to a SSN input field. However, I am seeing an error saying object has no method ‘ON’. The code is at http://jsfiddle.net/H4Q5f/

As you can see, I commented out to figure out the details, however had no luck so far. Any help is appreciated. For convenience, here is the code:

HTML:

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Test Page</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="../../appjavascript/ssa/mkwr/mytest.js"></script>

</head>

<body>
    <div data-role="page" id="MyTestPage">
        <div data-role="header" data-position="fixed" data-logo="true" data-tap-toggle="false" data-fullscreen="false" >
            <h1> Page Title </h1>
        </div>

        <div data-role="content">
            <div class="content-primary divcontent">
                <h1 class='h1title'>Using This App</h1>
                <p> Here are the instructions </a>
                </p>
            </div>

                <div class="inputdata">
                    <br /> <br /> 
                    <input type="text" name="accessCode" id="AccessCode" value=""  placeholder="Access Code:" /> <br />
                    <input type="text" id="ssn1" class="ssn" value=""  placeholder="SSN1:" /> <br />
                    <input type="text" id="ssn2" class="ssn" value=""  placeholder="SSN2:" /> <br />
                </div>
                <input type="button" id="myalert" value="Next" />
        </div>
        <!-- /content -->
</body>
</html>

And here is the java script

if (typeof TEST == "undefined" || !TEST) {
    var TEST = {};
}

( function() {
    TEST.mkwr = {
        init : function() { // this is a public function
      $("[data-role='page']").on("pagebeforeshow", TEST.mkwr.hideError());
      $("[data-role='page']").on("pageshow", TEST.mkwr.setHandlers());
        },

        // On Blur, we need to add the '-'s if they doesn't exist so the user
        // view edit the entered value formatted
        ssnOnBlurHandler : function(input) { // Auto format SSN on blur
            if ($(input).val().length == 9) {
                var _ssn = $(input).val();
                var _ssnSegmentA = _ssn.substring(0, 3);
                var _ssnSegmentB = _ssn.substring(3, 5);
                var _ssnSegmentC = _ssn.substring(5, 9);
                $(input).val(
                        _ssnSegmentA + "-" + _ssnSegmentB + "-" + _ssnSegmentC);
            }
        }, // _ssnOnBlurHandler

        // On focus, we need to remove the '-'s if they exist so the user
        // can edit the entered value
        ssnOnFocusHandler : function(input) {
            // allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
            if ($(input).val().length == 11) {
                var _ssn = $(input).val();
                var _ssnSegmentA = _ssn.substring(0, 3);
                var _ssnSegmentB = _ssn.substring(4, 6);
                var _ssnSegmentC = _ssn.substring(7, 11);

                $(input).val(_ssnSegmentA + _ssnSegmentB + _ssnSegmentC);
            }
        }, // _ssnOnFocusHandler

        // Hide all errors
        hideError : function() {
            $(".error").hide(); // Hide all errors
        },

        setHandlers : function() {
            alert("Set Handlers");
            // $(".ssn").each( function() {
      // var input = this; input.blur(TEST.mkwr.ssnOnBlurHandler(input))
      // });
      // $(".ssn").each( function() {
      // var input = this; input.focus(TEST.mkwr.ssnOnFocusHandler(input))
      // });
    }
    };
})(); // end the anonymous function

$("[data-role='page']").bind("pageinit", TEST.mkwr.init());
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I found a couple of issues with the code on the jsfiddle. Here is an updated one that is working to fire handlers and parse code. It looks like your ssn logic might need to be fixed a little but everything is getting you to there.

    http://jsfiddle.net/H4Q5f/10/

    The problems I saw were partly what was mentioned before you were using .on instead of .bind given the jquery version. But also you were not setting your handlers but rather firing your handlers. You had this:

    input.bind("blur",TEST.mkwr.ssnOnBlurHandler(input))

    which would return the result of the function to the set method which is not what you were looking for. So I changed it to this:

    input.bind("blur",TEST.mkwr.ssnOnBlurHandler)

    So now you are passing the handler to the set method so that it will fire when the event takes place.

    Hope this makes sense.

    • 0