Issue
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>
Solution
$('.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
Answered By - Deep Shah
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.