Using libphonenumber with JavaScript in HTML

Question

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?

Candler

I too was unable to find an actual usage example. The official documentation on gitlab assumes too much and doesn't actually tell you how to use it. – Plaice

Answer 1

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!

Candler

Thanks for posting this. I'm sure you've helped a lot of people. The only thing I would suggest is that you use the "type=tel" on your telephone inputs and then use the $("input[type='tel']") jquery selector for the keyup binding. – Plaice