JQuery or Javascript Input IP address mask

Question

I have used jquery masked input plugin as per stackoverflow question

Input box for changing IP Address

but It didn't worked for me .

I have used it like $("input").mask("9?99.9?99.9?99.9?99", {placeholder:" "});

This demo (http://jsfiddle.net/3F2gM/3/ ) i found in previous question , but it didnt works

That one looks working for me, what exactly do you mean not working here? — Simon Wang
– Simon Wang, Commented Jan 17, 2013 at 6:41
That mask plugin does not work for IP address at all. It does not restrict input between 1-255. See the second answer in the linked question. — Shiplu Mokaddim
– Shiplu Mokaddim, Commented Jan 17, 2013 at 6:45
on this example jsfiddle.net/3F2gM/3 please input 123.123.123.123 as IP and just leave the textbox — Miqdad Ali
– Miqdad Ali, Commented Jan 17, 2013 at 7:02

Stephen · Accepted Answer · 2017-05-31 18:38:05Z

6

It worked for me this way:

First, I added jquery-mask in the html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>

Then I typed the text field with the class .ip_address:

<label>ip:</label> <input class="ip_address" type="text" name="ip">

by last:

$('.ip_address').mask('0ZZ.0ZZ.0ZZ.0ZZ', { translation: { 'Z': { pattern: /[0-9]/, optional: true } } });

edited May 31, 2017 at 18:38

Stephen

1,15312 silver badges27 bronze badges

answered May 31, 2017 at 17:11

Joel Valdivia

611 silver badge2 bronze badges

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

Comments

sasi · Accepted Answer · 2015-03-25 13:05:55Z

This may help you:-
I have 4 input fields, each of its border was hided. Only the parent of the input field has the border, which will make it to look like a single text box. After that, allow the user to enter only 3 characters by using maxLength, once the user reached the maximum length, focus on to next field.
The code follows:- Link

HTML

<div>    
<input type="text" maxlength="3" class="onlythree" />.    
<input type="text" maxlength="3" class="onlythree" />.    
<input type="text" maxlength="3" class="onlythree" />.    
<input type="text" maxlength="3" class="onlythree" />    
</div>

CSS

.onlythree{    
width: 50px;    
border: 0;    
}    
div{    
border: 1px solid gray;    
display: inline-block;    
}

JS

$(".onlythree").keyup(function () {    
if (this.value.length == this.maxLength) {    
$(this).next('.onlythree').focus();    
}    
});

will824 · Accepted Answer · 2013-08-26 18:44:45Z

Actually I needed something similar to what you needed and what I did was to contact Igor Escobar, the author of Jquery Mask Plugin. There is not a complete built in way to do it yet, so he directed me to one option this could be accomplished and here I share the result:.

HTML

<input type="text" id="networkSectionIpAddress" class="ip_address" >

Javascript:

var options =  { 
            onKeyPress: function(cep, event, currentField, options){
//            console.log('An key was pressed!:', cep, ' event: ', event,'currentField: ', currentField, ' options: ', options);
                if(cep){
                  var ipArray = cep.split(".");
                  var lastValue = ipArray[ipArray.length-1];
                  if(lastValue != "" && parseInt(lastValue) > 255){
                      ipArray[ipArray.length-1] =  '255';
                      var resultingValue = ipArray.join(".");
                      currentField.attr('value',resultingValue);
                  }
            }             
        }};

        $('.ip_address').mask("000.000.000.000", options);

I hope this information is helpful for those using this great JQuery Mask plugin :)

bummi · Accepted Answer · 2015-01-12 08:47:54Z

1

I solved the problem differently. In the above example, the only change is the last octet, I change everything, because for quick commissioning can enter numbers greater than 255. In addition, when viewed through firebug, the value is set in the input, and the displayed text is the same as the user enters.

HTML

<input type="text" name="vpn_ip" class="mask-ipv4" value="">

Java Script

var options =  { 
    onChange: function(cep, event, currentField, options){
        if(cep){
            var ipArray = cep.split(".");
            for (i in ipArray){
                if(ipArray[i] != "" && parseInt(ipArray[i]) > 255){
                    ipArray[i] =  '255';
                }
            }
            var resultingValue = ipArray.join(".");
            $(currentField).val(resultingValue);
        }
    }
};

$('.mask-ipv4').mask("000.000.000.000", options);

edited Jan 12, 2015 at 8:47

bummi

27.4k14 gold badges67 silver badges105 bronze badges

answered Jan 12, 2015 at 7:37

vakorovin

111 bronze badge

1 Comment

arghtype Over a year ago

Languages other than English are not appropriate here, consider translating your answer.

t_m27 · Accepted Answer · 2019-04-24 19:34:47Z

Joel Valdivia's answer doesn't make sure that each item in the ip array <= 255, and will824's answer doesn't allow for < 3 digits for an item.

Here is a complete example based on their answers that meets both criteria.

var options =  { 
    onKeyPress: function(text, event, currentField, options){
                    if (text){
                        var ipArray = text.split(".");
                        var lastValue = ipArray[ipArray.length-1];
                        if(lastValue != "" && parseInt(lastValue) > 255){
                            ipArray[ipArray.length-1] = '255';
                            var resultingValue = ipArray.join(".");
                            currentField.text(resultingValue).val(resultingValue);
                        }
                    }             
                },
    translation: {
            'Z': {
                pattern: /[0-9]/, optional: true
            }
    }
};

$(".ipaddr").mask("0ZZ.0ZZ.0ZZ.0ZZ", options);

Piotr Labunski · Accepted Answer · 2020-05-17 13:04:07Z

0

it works in my case.

var ip_options = { 
    translation: { 'Z': { pattern: /[0-9]/, optional: true } },
    onKeyPress: function(cep, event, currentField, options) {
        if(cep) {
            var ipArray = cep.split(".");
            for (i in ipArray){
                if(ipArray[i] != "" && parseInt(ipArray[i]) > 255){
                    ipArray[i] =  '255';
                }
            }
            var resultingValue = ipArray.join(".");
            $(currentField).val(resultingValue);
        }
    }
};

$('.ip_address').mask("0ZZ.0ZZ.0ZZ.0ZZ", ip_options);

edited May 17, 2020 at 13:04

Piotr Labunski

1,6564 gold badges21 silver badges27 bronze badges

answered May 17, 2020 at 10:41

Rashad Aliyev

5710 bronze badges

Comments

Si8 · Accepted Answer · 2020-12-15 17:29:15Z

0

function getChar(event) {
    if (event.which == null) {
        if (event.keyCode < 32) return null;
        return String.fromCharCode(event.keyCode)
    }

    if (event.which != 0 && event.charCode != 0) {
        if (event.which < 32) return null; 
        return String.fromCharCode(event.which); 
    }
    return null; 
}



function maskIP(e){
    let key = getChar(e);
    
    
    if((!((key >= 0 && key <= 9) || key == '.'))  || this.value.length >= 15) e.preventDefault();
    if (this.value.indexOf('.') == -1){
        if (this.value.length >= 3 && key != '.') {
            e.preventDefault();    
        }
    }
    else{
        if(this.value.lastIndexOf('.') == this.value.length - 1 && key == '.') {
            e.preventDefault(); 
        }
        if ((this.value.length - this.value.lastIndexOf('.') > 3 && key != '.') || (key == '.' && this.value.split(".").length - 1 >= 3)) {
            e.preventDefault();    
        }
    }
}


serch = document.getElementById("#id of your element"); //can use others
serch.addEventListener('keypress', maskIP);

edited Dec 15, 2020 at 17:29

Si8

9,25522 gold badges120 silver badges223 bronze badges

answered Aug 12, 2019 at 5:40

Алексей

315 bronze badges

1 Comment

surajs1n Over a year ago

Please make sure, you do add some explanation along with the code sample. It enhances the essence of your explanation. thanks!

Collectives™ on Stack Overflow

JQuery or Javascript Input IP address mask

7 Answers 7

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related