2

我根据stackoverflow问题使用了jquery masked input plugin

更改 IP 地址的输入框

但它对我不起作用。

我用过$("input").mask("9?99.9?99.9?99.9?99", {placeholder:" "});

我在上一个问题中找到了这个演示（http://jsfiddle.net/3F2gM/3/ ），但它没有用

4

7 回答 7

6

它以这种方式对我有用：

首先，我在 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 } } });
于 2017-05-31T17:11:02.470 回答
4

这可能会对您有所帮助：-
我有 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>

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();    
}    
});
于 2014-01-29T19:17:24.913 回答
2

实际上，我需要与您需要的类似的东西，我所做的就是联系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 插件的人有所帮助:)

于 2013-08-26T17:11:08.170 回答
1

我以不同的方式解决了这个问题。在上面的例子中，唯一的变化是最后一个八位字节，我改变了一切，因为为了快速调试可以输入大于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);
于 2015-01-12T07:37:23.937 回答
0

Joel Valdivia 的答案不能确保 ip 数组中的每个项目 <= 255，而 will824 的答案不允许项目的 < 3 位数字。

这是一个完整的示例，基于他们满足这两个标准的答案。

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);
于 2019-04-24T19:34:47.063 回答
0

它适用于我的情况。

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);
于 2020-05-17T10:41:58.630 回答
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);
于 2019-08-12T05:40:17.103 回答