-2

I'm creating a site where users click on DIVs that look like a phone dialpad. When there are 3 or 7 characters, I add a hyphen to simulate the appearance of a phone number.

However, when they press the backspace button, it will not subtract the hyphen.

Here's my code with all of the unnecessary code removed:

$(".phone_digit").click(function(e){

    var html = "" + $("#input-box").html();

    if( event.target.id == "phone_delete" ){

        if( ( html.length === 5 ) || ( html.length === 9 ) ) {
            $("#input-box").html( html.substr(0, html.length - 2 ) );
        } else {
            $("#input-box").html( html.substr(0, html.length - 1 ) );
        }

        html = "" + $("#input-box").html();

    } else if ($("#input-box").html().length < 12) {
        $("#input-box").html( html + "" + $("#" + event.target.id).html() );
        html = "" + $("#input-box").html();
    }

    if( ( $("#input-box").html().length === 3 ) || ( html.length === 7 ) ) {
        $("#input-box").html( $("#input-box").html() + "&#45;");
        html = "" + $("#input-box").html();
    }
})

One strange thing: if I change the length parameters from "5" and "9" to "4" and "8", the code will subtract past the hyphen. But this isn't ideal because it leaves a dangling hyphen in the #input-box until you either add or subtract another number.

Here's a fiddle: https://jsfiddle.net/mediocreb/t66jf0t4/3/

mediocre_bro
  • 95
  • 8
  • jQuery is not Javascript -- and `substr` is a *Javascript* string method. Learning that first may make a world of difference for you. – Dexygen Apr 25 '18 at 20:52
  • 1
    @GeorgeJempty I've updated the title to reflect this. Now, how does this information help answer my question? – mediocre_bro Apr 25 '18 at 20:58
  • There are a number of jQuery phone number "mask" plugins that are freely available. If you want to roll your own, I would suggest using one of the [open source ones as an example](https://github.com/rajaramtt/jquery-input-mask-phone-number/blob/master/dist/jquery-input-mask-phone-number.js). Since you're using jQuery, you should take advantage of the utilities available. – wahwahwah Apr 25 '18 at 21:09
  • @wahwahwah That's a really cool plugin. But it doesn't work for me because my code is not using an `input` element. The `#input-box` that displays the input is a div. I don't want the user to manually enter information because this will be primarily used on a touch screen. Thank you, though. – mediocre_bro Apr 25 '18 at 21:41
  • 1
    I'm suggesting you use the code from the example to modify your current code - the difference is trivial between an `input` or `div` in this case. – wahwahwah Apr 25 '18 at 21:47
  • 1
    "how does this information help answer my question" -- it helps you know where to look for the documentation for `substr – Dexygen Apr 25 '18 at 21:52

1 Answers1

0

It's working but your conditions are off. You're removing the hyphen just fine, but then you're putting it back in your final "if" block.

Change your final "else" to check like this instead:

  if (event.target.id !== "phone_delete" && (($("#input-box").html().length === 3) || (html.length === 7))) {
Daniel
  • 3,312
  • 1
  • 14
  • 31