How to prevent displaying an output of a second keypress if that char is the same with the first outputted char?

Question

Say I pressed "." (keycode 46 on the keyboard) first press will show the char, second press shows nothing unless you press another char that is different then it shows again on the next press.

I'm not really familiar using keypress, keydown, keyup, keycode but whatever can make it happen in pure javascript. I need something that is backward compatible up to IE6 if possible if not IE8 would be fine.

Cut story short: I need to validate an ip address(ipv4) input, keypress will only work if char is valid for an ip address characteristic, I don't want to use pop-up message if possible.

I've read something about "pattern" and matching it to the input but aside from the fact that I am not familiar with it also I am not sure if it's backward compatible.

Here's what I've done so far:

Trapped inputs, only numbers and dot allowed - OK
Trapped first block of the ip if > 255 or empty dot when press won't work - OK
Trapped only 3 dots allowed - OK

I'm stucked on the part that it should not allow 2 consecutive dots when press that's why I can't proceed trapping on the 2nd, 3rd and 4th block of the ip address.

MY CODE

Script:

<script type="text/javascript">
    function allowNumbersAndDot(e){
        var n;
        var dot = '.';
        var ip = document.getElementById('ipaddr').value;
        if (parseInt(ip) < 256 && ip.split(".").length < 4) {

            if (ip == dot) {
                document.all ? n = e.keyCode : n = e.which;
                return (n > 47 && n < 58);                      
            }
            else {
                document.all ? n = e.keyCode : n = e.which;
                return ((n > 47 && n < 58) || n == 46);                         
            }
        }
        else {
            document.all ? n = e.keyCode : n = e.which;
            return (n > 47 && n < 58);
        }

    }   

    function handleKeyPress0(e) {
        if (allowNumbersAndDot(e) ) {
            return true;
        } else {
            return false;
        }
    }               
</script>

Body:

<body>
    <input id="ipaddr" type="text" title="enter ip address" name="ipaddr" onfocus="this.value=''" maxlength="15" onkeypress="return handleKeyPress0(event);" />                                                 
    <input id="pingbtn" type="submit" value="PING"/>                                                                                                                
</body>

keypress is deprecated. You might want to use keydown instead. Don't know about compatibility with IE, though. — D. Pardal
– D. Pardal, Commented May 7, 2020 at 14:36
This mostly relies on older IE versions. Is there like a timeline of support for deprecated codes? — C4DXYZ-SO
– C4DXYZ-SO, Commented May 7, 2020 at 14:49
Browsers will likely keep supporting keypress for some years from now, but there is no date for dropping support. — D. Pardal
– D. Pardal, Commented May 7, 2020 at 14:52
But as long as client uses the same version of browser, it will continue to work right? — C4DXYZ-SO
– C4DXYZ-SO, Commented May 8, 2020 at 1:33

James · Accepted Answer · 2020-05-09 10:53:22Z

2

I'd make a regex that returns true for any valid partial IP address, and then on each keypress check that the new value will still be valid.

function handleKeyPress0(e) {
  let regex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))?)?)?)?)?)?$/;
  return regex.test(e.target.value + String.fromCharCode(e.keyCode));
}

<input id="ipaddr" type="text" title="enter ip address" name="ipaddr" onfocus="this.value=''" maxlength="15" onkeypress="return handleKeyPress0(event);" />                                                 
    <input id="pingbtn" type="submit" value="PING"/>

edited May 9, 2020 at 10:53

answered May 7, 2020 at 14:50

James

22.4k5 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

C4DXYZ-SO Over a year ago

This is actually really good. Almost perfect. Let me see what can I do with this. Thank you sir.

C4DXYZ-SO Over a year ago

I found a link: Validate IP - RegExp to address the 255 max range but I can't seem to make it work. I just pasted the whole thing. I'm not sure if I need to make some modifications with it's syntax need your opinion on this.

James Over a year ago

Updated, I stole part of the regex here to do the numeric validation. The regex turned into somewhat of a monstrosity, there might be a less verbose technique but this seems to work.

C4DXYZ-SO Over a year ago

I'm satisfied with this I will now mark it as the correct answer. In my previous link they mention about "quantifier" to make it shorter but I can't figure it out. I'll try to play with it and see if I can make it look simplier. Thanks.

C4DXYZ-SO Over a year ago

It still got some issue because it accepts "00" and "000".

|

Wassim Tahraoui · Accepted Answer · 2020-05-07 14:27:29Z

0

you can make a variable that stores the first key press and another variable that stores the second key press, if they're equal/identical, the output is not displayed, and to make this work on the long-term, whenever they're equal/identical, the second variable is empty, and whenever they're not equal/identical pass the value of the second variable to the first variable leaving the second one empty for future key presses and so on and so forth.. this answer is general, I gave you an idea that could do you good in this situation and any similar situation in the future

answered May 7, 2020 at 14:27

Wassim Tahraoui

1792 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to prevent displaying an output of a second keypress if that char is the same with the first outputted char?

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related