javascripthtmllibphonenumber

Using libphonenumber with JavaScript in HTML

libphonenumber is quite the confusing tool to figure out considering the plethora of implementations and examples found all over the web, so please bear with me.

I'm simlpy trying to use this package like I've used every other JavaScript library like jQuery, via a script tag in an HTML file.

I've compiled libphonenumber using Google's compose tool, via the instructions here

So with this single file, I'm trying to use it as below. However, no matter what I've tried I simply can't seem to access any of the methods within. 

<script type="text/javascript" language="javascript" src="/static/js/libphonenumber.js"></script>
<script type="text/javascript">

    $(".phone-format").keyup(function () {
        // Don't reformat backspace/delete so correcting mistakes is easier
        if (event.keyCode != 46 && event.keyCode != 8) {
            var val_old = $(this).val();
            var newString = new libphonenumber.i18n.phonenumbers.AsYouTypeFormatter('US').input(val_old);
            $(this).focus().val('').val(newString);
        }
    });

</script>

Is this usage scenario not at all supported?

Solution

  • Well I guess I should have posted sooner, because as usually happens once I post I find the answer.

    I only stumbled upon this while using JSFiddle. I noticed that they had dependencies you can add, among them was the JavaScript port of libphonenumber (which I'd already tried to use). While it doesn't load correctly in JSFiddle because the connection is refused, the link still works to a minified version.

    See here: Minified JavaScript of libphonenumber-js

    Once I dropped this in place, and modified my code a bit, suddenly we're off to the races and everything is golden. 

    <script type="text/javascript" language="javascript" src="/static/js/libphonenumber-js.min.js"></script>
<script type="text/javascript">
     $(".phone-format").keyup(function () {
            var val_old = $(this).val();
            var newString = new libphonenumber.AsYouType('US').input(val_old);
            $(this).focus().val('').val(newString);
    });
</script>

    I'm really still curious if I just missed something in all the searching I've done over the last couple days, because I don't feel it should have been this difficult or require this much reverse engineering to be able to find this version of the package.

    Oh well, hope this helps someone!