michltm michltm - 1 year ago 51
CSS Question

divide a single input form in different parts

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.

enter image description here

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>
<label class="control-label" for="code">Code</label>
<div class="controls">
<input type="password" name="code" id="code" class="form-control" placeholder="code" />


<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 Source


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

Javascript :

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

You can try this... Demo