Jquery เปลี่ยน Enter ให้ทำงานแทน Tab และสามารถ Enter เพื่อ Submit Form ได้
โดย copy code ด้านล่างนี้ ตั้งชื่อไฟล์ว่า jquery-entertotab.js
การใช้งาน
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("input,select,textarea").keyup(function(e) { ///// เวลากด enter ให้ tab /////////////
if(e.keyCode==13){
var tabindex = $(this).attr('tabindex');
tabindex = parseInt(tabindex)+1; //increment tabindex
$('[tabindex=' + tabindex + ']').focus(); //// set focus ที่ tabindex+1
$('[tabindex=' + tabindex + ']').select(); //// เลือก obj /////
}
});
$('[tabindex=' + 1 + ']').focus(); //// เลือก focus ที่ tabindex=1 /////
$('form').keypress(function(e){
if(e.which === 13){
return false;
}
});
$('input[type="submit"]').keypress(function(e){
//alert(e.which);
if(e.which === 13){
$('input[type="submit"]').trigger('click');
}
});
$('button[type="submit"]').keypress(function(e){
if(e.which === 13){
$('button[type="submit"]').trigger('click');
}
});
});
</script>
<body>
<form>
<p>Name1 <input tabindex="1" name="txt1" type="text" /></p>
<p>Name2 <input tabindex="2" name="txt2" type="text" /></p>
<p>Name3 <input tabindex="3" name="txt3" type="text" /></p>
<p>Name4 <input tabindex="4" name="txt4" type="text" /></p>
<p>Name5 <input tabindex="5" name="txt5" type="text" /></p>
<p><button tabindex="6" name="bt01" type="submit">บันทึก</button></p>
</form>
</body>
</html>
copy code และ ทดสอบได้ที่นี่
