Question

我已经根据stackoverflow问题使用了jquery masked输入插件

但它对我不起作用。

我使用它像$("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个输入字段，每个边框都被隐藏了。只有输入字段的父级具有边框，这将使其看起来像一个文本框。之后，允许用户使用 maxLength 仅输入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数组中的每个项目<= 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);

Answer 6

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.addEventListener('keypress', maskIP);

Answer 7

在我的情况下有效。

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

JQuery或Javascript输入IP地址掩码

7 个答案: