divide a single input form in different parts

Question

To make it easier for people to type a long password, I'd like to divide a single input form in 4 parts as shown on the picture below.

Is that possible in CSS for example?

I'd like to avoid to have to make 4 different input forms and check for each of them that the part of code is correct.

Here is a Fiddle to start with https://jsfiddle.net/bb61c412/467/

And the corresponding code:

<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />


<div class=col-sm-6>
  <form>
    <label class="control-label" for="code">Code</label>
    <div class="controls">
      <input type="password" name="code" id="code" class="form-control" placeholder="code" />
    </div>
  </form>

</div>



<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

You can get that using Gradients.

input.form-control {
  border: none;
  outline: none;
  box-shadow: none;
  background-image: linear-gradient(to left, white calc(.5em + 1px), black calc(.5em + 1px), black calc(.5em + 2px), transparent 0), linear-gradient(to right, black 1px, transparent 0), linear-gradient(to bottom, black 1px, transparent 0), linear-gradient(to top, black 1px, transparent 0);
  background-size: 3em 100%;
  /* background-repeat: no-repeat; */
  font-size: 28px;
  padding: 0px;
  font-family: monospace;
  width: 11.5em;
}

Working Fiddle

Answer 2

$('.creditCardText').keyup(function() {
    var foo = $(this).val().split("-").join(""); // remove hyphens

    if (foo.length > 0) {
       foo = foo.match(new RegExp('.{1,4}', 'g')).join("-");
    }

    $(this).val(foo);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<input type="text" class="creditCardText" />

You can try this... Demo

Answer 3

I did it using an input id on my website. https://jsfiddle.net/v8kkfjeo/1/

<input
    id="telInput" 
    type="tel" 
    size="4" 
    required="true" 
    pattern="\[0-9]{3}\"
    placeholder="359"
/>

<input
    id="telInput" 
    type="tel" 
    size="4" 
    required="true" 
    pattern="[0-9]{3}\"
    placeholder="888"
/>

 -

<input
    id="telInput" 
    type="tel" 
    size="12" 
    required="true" 
    pattern="[0-9]{2}\[0-9]{2}\[0-9]{2}"
    placeholder="888888"
/>

Answer 4

I don't think it is possible to achieve this only using css. but if you could use some js and some constrains like maximum possible character along with it you could achieve this. You can find the whole code here https://jsfiddle.net/sachindas246/cad53fos
The approach is to overlay the input above a div and create multiple child div as backgrounds.

function getRenderText(text,cur_pos){
    text = text.replace(/\s/g, '');
    text = text.replace(/-/g, '');
    const text_arr = text.match(/.{1,4}/g) ?? [];
    return (text_arr.join(' - '));
}
var real_input = document.getElementById('real_input');
real_input.addEventListener('input', function(event) {
    real_input.value = getRenderText(event.target.value,event.target.selectionStart);
});

.container {
    display: grid;
    width: 19ch;
}
.background{
    grid-area: 1 / 1;
    display: inline-flex;
    gap: 2ch;
}
.background_box{
    background-color: whitesmoke;
    height: 2rem;
    flex: 1;
    border-radius: 5px;
    border: solid 1px lightgray;
}
#real_input{
    grid-area: 1 / 1;
    border: 0;
    outline: none;
    font-family: monospace;
    font-size: 1rem;
    letter-spacing: 0ch;
    padding-inline: 0;
    background-color: transparent;
    width: calc((16 * 1.5ch) + (9 * 1.5ch)) ;
    letter-spacing: 0.5ch;
    padding-right: 1ch;
    padding-left: 1.5ch;
    text-transform: uppercase;  
}
fieldset{
    border: none;
}

<form action="">
    <fieldset class="container">
        <div class="background">
            <div class="background_box"></div>
            <div class="background_box"></div>
            <div class="background_box"></div>
            <div class="background_box"></div>                
        </div>
        <input class="overlay transparent" type="text" name="" id="real_input" value="dada - dada - dage - gegf" autocomplete="off" maxlength="25" spellcheck="false">
    </fieldset>
</form>

The drawback here is you need to manually remove spaces and - .

text = text.replace(/\s/g, '');
text = text.replace(/-/g, '');