Hii,
In this blog I am going to share a javascript code using which we can create a form in which user can fill data without using mouse to move from one input field to another.
You will see that on keypress enter focus will move to next input field and on keypress tab focus is disabled.
Here's the example,please go through it.
Example:
Html:
<form class="div1">
<div>
<label>Full Name:</label>
<input id="nameI" type="text" name="Name" autofocus>
</div>
<div>
<label>Father's Name:</label>
<input id="FnameI" type="text" name="Name">
</div>
<div style="clear:both">
<label>Country</label>
<select name="Country" id="countryI">
<option selected>[choose yours]</option>
<option >USA</option>
<option >UK</option>
<option>INDIA</option>
</select>
</div>
<div>
<label style=" margin-top:3px;">Contact:</label>
<input id="contactI" type="tel" name="contact_num" maxlength="10" size="10">
</div>
<div>
<input id="chkboX" type="checkbox" name="agree" value="agree" required style="float:left;width:10px;margin:5px;">
<p>i am sure that all data filled by me is correct.</p>
</div>
<div>
<input type="button" value="submit" class="submit" id="subMit" onclick="printvalue()" style="margin-top:30px;float:left;">
</div>
</form>
CSS:
.clr:after{content: "";clear: both;display: block;}
*{margin: 0;padding: 0;box-sizing:border-box;}
body{font-family: arial;margin: 0 auto;width: 1024px;}
form::after{clear: both;display: block;content: "";}
div::after{clear: both;display: block;content: "";}
form{width:700px;font-size: 20px;color: #fff;border:5px solid black;padding:30px;margin: 0 auto;
box-sizing:border-box;background-color:rgb(94,94,94);}
.div1 > div{width: 100%;margin:10px auto 0;}
form label{float: left;width:100px;background-color:black;color:#fff;border-radius:5px;margin-bottom:5px;text-align:center;}
form input{float: left;margin: 0 auto 0 10px;width:auto;color:#000;padding: 2px;}
form select{margin-left:10px;}
JAVASCRIPT:
$(document).ready(function(){
$('#nameI, #FnameI, #countryI, #contactI, #chkboX, #subMit').keypress(function(e){
var key = e.keyCode ? e.keyCode : e.which;
var field = $(this).closest('div').next().find('#nameI, #FnameI, #countryI, #contactI, #chkboX, #subMit');
if(key == 13)
{
field.focus();
return false;
}
});
});
$(document).keydown(function(objEvent) {
if (objEvent.keyCode == 9) { //tab pressed
objEvent.preventDefault(); // stops its action
}
})
Note:You must include this link of jquery library
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
0 Comment(s)