如何修復jQuery中分隔符的位置？

Question

這裏我有一些輸入字段，最多隻能輸入4個數字，而輸出在底部的輸入框中顯示 。

問題：我很期待是有分離器（-）的位置留在其位置，而同時顯示用戶輸入的運動。

我正在尋找從Windows IP地址窗口像這樣：

這是我迄今嘗試：Fiddle Demo

$(document).ready(function() { 
 
    $('#user > input').keyup(function() { 
 
     addAll(); 
 
    }); 
 

 
    var addAll = function() { 
 
     var input1 = $('#user > input:nth-child(1)').val(); 
 
     var input2 = $('#user > input:nth-child(2)').val(); 
 
     var input3 = $('#user > input:nth-child(3)').val(); 
 
     var input4 = $('#user > input:nth-child(4)').val(); 
 
     $('#op > input').val(input1 + ' - ' + input2 + ' - ' + input3 + ' - ' + input4); 
 
    }; 
 
    $('input').on('keypress keyup blur', function(event) { 
 
     $(this).val($(this).val().replace(/[^\d].+/, "")); 
 
     if ((event.which < 48 || event.which > 57)) { 
 
      event.preventDefault(); 
 
     } 
 
    }); 
 
});

.input { 
 
    color: #666666; 
 
    font-weight: bold; 
 
    font-family:arial; 
 
    font-size:15px; 
 
} 
 
.input input { 
 
    width: 40px; 
 
    border: 1px solid #cccccc; 
 
    outline: none; 
 
    padding: 5px 10px; 
 
    color: #57b2bd; 
 
    font-size: 18px; 
 
    border-radius: 5px; 
 
    background: #f3f3f3; 
 
    -transition-duration: 0.5s; 
 
    -webkit-transition-duration: 0.5s; 
 
    -moz-transition-duration: 0.5s; 
 
} 
 
.input input:focus { 
 
    background: #fcfcfc; 
 
    box-shadow: 0px 2px 2px #dbdbdb; 
 
} 
 
div:nth-child(2) { 
 
    font-family: arial; 
 
    padding: 30px 0; 
 
} 
 
#op input { 
 
    color:#555555; 
 
    width: 213px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="user" class="input"> 
 
Type numeric : 
 
    <input type="text" maxlength="4" /> - 
 
    <input type="text" maxlength="4" /> - 
 
    <input type="text" maxlength="4" /> - 
 
    <input type="text" maxlength="4" /> 
 
</div> 
 
<div id="op" class="input"> 
 
    <input type="text" /> 
 
</div>

Answer 1

一種方式來做到這一點是：

$(document).ready(function() { 
    $('#user > input').keypress(function() { 
     addAll(); 
    }); 

    var addAll = function() { 
     var input1 = $('#user > input:nth-child(1)').val(); 
     var input2 = $('#user > input:nth-child(2)').val(); 
     var input3 = $('#user > input:nth-child(3)').val(); 
     var input4 = $('#user > input:nth-child(4)').val(); 
     var input = input1 + input2 + input3 + input4; 
     var inputarray = input.split(''); 
     $.each(inputarray,function(i,v){ 
      if((i+1)%4 == 0 && i< inputarray.length -1) { 
      inputarray[i] = v+'-'; 
      } 
     }); 
     input = inputarray.join(''); 
     $('#op > input').val(input); 


    }; 
    $('input').on('keypress keyup blur', function(event) { 
     $(this).val($(this).val().replace(/[^\d].+/, "")); 
     if ((event.which < 48 || event.which > 57)) { 
      event.preventDefault(); 
     } 
    }); 
}); 

演示：https://jsfiddle.net/a8g57cj8/

Answer 2

檢查JSFiddle鏈接

$(document).ready(function() { 
 
    $('#user > input').keyup(function() { 
 
     addAll(); 
 
    }); 
 

 
    var addAll = function() { 
 
     inputs=[]; 
 
     for(i=1;i<=4;i++) 
 
     { 
 
     \t var val = $.trim($('#user > input:nth-child('+i+')').val()); 
 
      masked_input= val+ ("  ".substr(val.length*2)); 
 
      inputs.push(masked_input); 
 
     } 
 
     $('#op > input').val(inputs.join(' - ')); 
 
    }; 
 
    $('input').on('keypress keyup blur', function(event) { 
 
     $(this).val($(this).val().replace(/[^\d].+/, "")); 
 
     if ((event.which < 48 || event.which > 57)) { 
 
      event.preventDefault(); 
 
     } 
 
    }); 
 
    $('#user > input:first').trigger('keyup'); 
 
});

.input { 
 
    color: #666666; 
 
    font-weight: bold; 
 
    font-family:arial; 
 
    font-size:15px; 
 
} 
 
#user input, .input input { 
 
    width: 40px; 
 
    border: 1px solid #cccccc; 
 
    outline: none; 
 
    padding: 5px 10px; 
 
    color: #57b2bd; 
 
    font-size: 18px; 
 
    border-radius: 5px; 
 
    background: #f3f3f3; 
 
    -transition-duration: 0.5s; 
 
    -webkit-transition-duration: 0.5s; 
 
    -moz-transition-duration: 0.5s; 
 
} 
 
.input input:focus { 
 
    background: #fcfcfc; 
 
    box-shadow: 0px 2px 2px #dbdbdb; 
 
} 
 
div:nth-child(2) { 
 
    font-family: arial; 
 
    padding: 30px 0; 
 
} 
 
.input input { 
 
    color:#555555; 
 
    width: 213px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="user" class="input"> 
 
Type numeric : 
 
    <input type="text" maxlength="4" /> - 
 
    <input type="text" maxlength="4" /> - 
 
    <input type="text" maxlength="4" /> - 
 
    <input type="text" maxlength="4" /> 
 
</div> 
 
<div id="op" class="input"> 
 
    <input type="text" /> 
 
</div>

Answer 3

什麼只是填充的輸出與空間和等寬字體？添加以下的CSS：

#op input { 
    width: 275px; 
    font-family: monospace; 
} 

和改變JS到：

$(document).ready(function() { 
    $('#user > input').keyup(function() { 
     addAll(); 
    }); 

    var pad = function(num) { 
      return (" " + num).substr(-4, 4); 
    } 

    var addAll = function() { 
    var input1 = $('#user > input:nth-child(1)').val(); 
     var input2 = $('#user > input:nth-child(2)').val(); 
     var input3 = $('#user > input:nth-child(3)').val(); 
     var input4 = $('#user > input:nth-child(4)').val(); 
     $('#op > input').val(pad(input1) + ' - ' + pad(input2) + ' - ' + pad(input3) + ' - ' + pad(input4)); 
    }; 
    $('input').on('keypress keyup blur', function(event) { 
     $(this).val($(this).val().replace(/[^\d].+/, "")); 
     if ((event.which < 48 || event.which > 57)) { 
      event.preventDefault(); 
     } 
    }); 

    addAll(); 
}); 

演示：https://jsfiddle.net/wpqqaxqm/

Answer 4

設置裏面#op的等寬字體輸入的字體，總會留下每個元素4個空格。

爲了實現這一點，您需要添加一些填充（在這種情況下爲每個可能長度的空格），您可以使用此問題的解決方案here。 因此，考慮您選擇的功能：

function pad(pad, str, padLeft) { 
if (typeof str === 'undefined') 
    return pad; 
    if (padLeft) { 
    return (pad + str).slice(-pad.length); 
    } else { 
    return (str + pad).substring(0, pad.length); 
    } 
} 

你將不得不

$('#op > input').val(pad(input1, 4, false) + ' - ' + pad(input2, 4, false)  + ' - ' + pad(input3, 4, false) + ' - ' + pad(input4, 4, false)); 

乾杯