javascript - JQuery または Javascript 入力 IP アドレス マスク

Question

stackoverflowの質問に従って、jqueryマスク入力プラグインを使用しました

IP アドレスを変更するための入力ボックス

しかし、私にはうまくいきませんでした。

私はそれを次のように使用しました$("input").mask("9?99.9?99.9?99.9?99", {placeholder:" "});

このデモ ( http://jsfiddle.net/3F2gM/3/ ) 前の質問で見つけましたが、機能しませんでした

Answer 1

これはあなたを助けるかもしれません:-
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();    
}    
});  

Answer 2

実際、私はあなたが必要としていたものと同様のものが必要でした。私がしたことは、Jquery Mask Pluginの作成者である Igor Escobar に連絡することでした。それを行うための完全な組み込みの方法はまだないので、彼はこれを達成できる1つのオプションを教えてくれました。ここで結果を共有します。

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 3

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