How to fix the position of the separator in jQuery?

Question

Here I have some input fields where only a maximum of 4 numerics can be entered and the output would display in the input box which is at the bottom.

Problem : What I'm expecting is to have the separator (-) position to stay at its position without moving while displaying the user input.

I'm looking for something like this from Windows IP Address window :

Here's what I have tried so far : 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>

add spaces if the filed isn't the proper length – madalinivascu Sep 22 '16 at 06:39 — madalinivascu, Sep 22 '16 at 06:39

score 2 · Accepted Answer · answered Sep 22 '16 at 06:46

One way to do it is:

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

demo:https://jsfiddle.net/a8g57cj8/

That looks better. But I was looking something like the windows IP address input style :) — Hitesh Misro, Sep 22 '16 at 06:47

Haresh Vidja · Answer 2 · 2016-09-22T07:01:06.813

Check JSFiddle Link

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

    var addAll = function() {
        inputs=[];
        for(i=1;i<=4;i++)
        {
         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>

Thanks @Haresh, That looks good but a slight glitch is coming. — Hitesh Misro, Sep 22 '16 at 07:16
Its my pleasure to hear from you, If you like my answer don't forget to mark as correct and upvote it ;) — Haresh Vidja, Sep 22 '16 at 07:20

score 1 · Answer 3 · answered Sep 22 '16 at 06:53

What about just padding the output with spaces and a monospace font? Adding the following to CSS:

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

and changing the JS to:

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

demo:https://jsfiddle.net/wpqqaxqm/

score 1 · Answer 4 · edited May 23 '17 at 11:51

Set the font of the input inside #op to a monospace font, and always leave 4 spaces for each element.

To achieve that you need to add some padding (in this case spaces for every possible length), you could use the solutions to this problem here . So considering you chose the function:

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

You would have

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

Cheers

How to fix the position of the separator in jQuery?

4 Answers4