JQuery或Javascript输入IP地址掩码

根据stackoverflow问题，我使用了jquery屏蔽输入插件

但这对我不起作用

我像

$（“input”）.mask（“9？99.9？99.9？99.9？99.9？99.9？99”），{占位符：}一样使用它

我在上一个问题中找到了这个演示（），但它不起作用
事实上，我需要一些类似于您所需要的东西，我所做的是联系Igor Escobar，这本书的作者。目前还没有一个完整的内置方法来实现这一点，所以他让我选择了一个可以实现的选项，在这里我分享了这个结果：

HTML

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

我希望这些信息对那些使用这个伟大的JQuery掩码插件的人有所帮助：）
这可能会对你有所帮助：-

我有4个输入字段，每个字段的边框都隐藏了。只有输入字段的父字段具有边框，这将使其看起来像单个文本框。
之后，允许用户使用maxLength只输入3个字符，一旦用户达到最大长度，请关注下一个字段。

守则如下：

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> 

JS

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

我以不同的方式解决了这个问题。在上面的示例中，唯一的更改是最后一个八位字节，我更改了所有内容，因为对于快速调试，可以输入大于255的数字。此外，通过firebug查看时，该值在输入中设置，显示的文本与用户输入的文本相同

HTML

对我来说是这样的：

首先，我在html中添加了jquery掩码：

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

Joel Valdivia的回答不能确保ip数组
函数getChar（事件）中的每个项{
if（event.which==null）{
if（event.keyCode<32）返回null；
返回字符串.fromCharCode（event.keyCode）
}
if（event.which！=0&&event.charCode！=0）{
if（event.which<32）返回null；
返回字符串.fromCharCode（event.which）；
}
返回null；
}
函数maskIP（e）{
让key=getChar（e）；
如果（！（（键>=0&&key=15）e.preventDefault（）；
if（this.value.indexOf（'.'）=-1）{
如果（this.value.length>=3&&key！='.'））{
e、 预防默认值（）；
}
}
否则{
if（this.value.lastIndexOf（'.'）==this.value.length-1&&key=='.'））{
e、 预防默认值（）；
}
if（（this.value.length-this.value.lastIndexOf（'.'）>3&&key！='.）| |（key='.&&this.value.split（“.”）.length-1>=3））{
e、 预防默认值（）；
}
}
}
serch=document.getElementById（“元素的id”）；//可以使用其他
serch.addEventListener（“按键”，maskIP）；
它在我的情况下有效

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);

这个看起来对我有用，你到底是什么意思不在这里工作？这个掩码插件对IP地址根本不起作用。它不限制输入在1-255之间。请参阅链接问题中的第二个答案。在这个例子中，请输入123.123.123.123作为IP，只需保留textboxLanguages而不是英语在这里是不合适的，c考虑翻译您的答案。请确保，您确实在代码示例中添加了一些解释。它增强了您解释的实质。谢谢！
<input type="text" name="vpn_ip" class="mask-ipv4" value="">

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);

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

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

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

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);

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);

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);