JQuery 或 Javascript 输入 IP 地址掩码

Question

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

Input box for changing IP Address

但它对我不起作用。

我像$("input").mask("9?99.9?99.9?99.9?99", {placeholder:" "});一样使用它

我在上一个问题中找到了这个演示 (http://jsfiddle.net/3F2gM/3/)，但它不起作用

Answer 1

这样对我有用：

首先，我在 html 中添加了 jquery-mask：

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

然后我输入了类 .ip_address 的文本字段：

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

Answer 2

这可能会对您有所帮助：-
我有 4 个输入字段，每个边框都被隐藏了。只有输入字段的父级有边框，这将使它看起来像一个单一的文本框。 之后，使用 ma​​xLength 允许用户只输入 3 个字符，一旦用户达到最大长度，则关注下一个字段。
代码如下：-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();    
}    
});  

Answer 3

实际上，我需要与您需要的类似的东西，我所做的就是联系Jquery Mask Plugin 的作者 Igor Escobar。还没有一个完整的内置方法可以做到这一点，所以他指导我选择一个可以实现的选项，在这里我分享结果：。

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

我希望这些信息对那些使用这个很棒的 JQuery Mask 插件的人有所帮助:)

Answer 4

我以不同的方式解决了这个问题。在上面的例子中，唯一的变化是最后一个八位字节，我改变了一切，因为为了快速调试可以输入大于255的数字。另外，通过firebug查看时，该值是在输入中设置的，显示的文本是和用户输入的一样。

HTML

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

Java 脚本

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

Answer 5

Joel Valdivia 的答案不能确保 ip 数组中的每个项目

这里是一个完整的例子，基于他们的回答同时满足这两个标准。

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

Answer 6

它适用于我的情况。

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

Answer 7

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