|
 |
| |
ขอ java script ในการลบค่าในช่อง textbox แล้วโฟกัสช่องก่อนหน้าหน่อยครับ |
| |
 |
|
|
 |
 |
|
นึกได้แค่แนวคิด ลองไป search ๆ ดูต่อเองนะ
- จับ keycode ของคีย์บอร์ดถ้ากด ปุ่มลบ เช่น Backspace, Space bar, Delete เมื่อมีการกดปุ่มพวกนี้ที่ input ช่องนั้น ๆ ให่มัน focus ไปที่ช่องก่อนหน้า
ไม่รู้แนวคิดนี้จะเวิร์คป่าวนะ...
แต่ทำไม ไม่คีย์เป็น input เดียวไปเลยอ่ะ จะเก็บแยกทำไม 
ผมมี code อยู่ชุดนึง แต่ผมก็ไปเอาของคนอื่นมา อธิบายการทำงานไม่ถูก เด๋วจะ Edit มาให้เอาไปลองเล่นดู....แต่มันเป็นเรื่องเลขบัตรประชาชนนะ กดลบ ๆ ๆ พอลบ ช่องที่ต้องการจบมันก็จะ focus ช่องก่อนหน้าให้
ลอง Copy แล้วไปเล่นดู อาจจะเห็นภาพ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript'>
function Numbers(e){
var keynum;
var keychar;
var numcheck;
if(window.event) {// IE
keynum = e.keyCode;844
}
else if(e.which) {// Netscape/Firefox/Opera
keynum = e.which;
}
if(keynum == 13 || keynum == 8 || typeof(keynum) == "undefined"){
return true;
}
keychar= String.fromCharCode(keynum);
numcheck = /^[0-9]$/;
return numcheck.test(keychar);
}
function keyup(obj,e){
var keynum;
var keychar;
var id = '';
if(window.event) {// IE
keynum = e.keyCode;
}
else if(e.which) {// Netscape/Firefox/Opera
keynum = e.which;
}
keychar= String.fromCharCode(keynum);
var tagInput = document.getElementsByTagName('input');
for(i=0;i<=tagInput.length;i++){
if(tagInput[i] == obj){
var prevObj = tagInput[i-1];
var nextObj = tagInput[i+1];
break;
}
}
if(obj.value.length == 0 && keynum == 8) prevObj.focus();
if(obj.value.length == obj.getAttribute('maxlength')){
for(i=0;i<=tagInput.length;i++){
if(tagInput[i].id.substring(0,5) == 'txtID'){
if(tagInput[i].value.length == tagInput[i].getAttribute('maxlength')){
id += tagInput[i].value;
if(tagInput[i].id == 'txtID5') break;
}
else{
tagInput[i].focus();
return;
}
}
}
}
}
</script>
</head>
<body>
<div>
<form id="regis" name="regis" action="confirm.php" method="post" onsubmit="JavaScript:return send_data();">
<div class="form-item">
<label for="id_card">เลขบัตรประชาชน:</label>
<input type="text" name="txtID1" id="txtID1" style="width:12px" align="left" maxlength=1 onkeyup="keyup(this,event)" onkeypress="return Numbers(event)" /> -
<input type="text" name="txtID2" id="txtID2" style="width:35px" align="left" maxlength=4 onkeyup="keyup(this,event)" onkeypress="return Numbers(event)" /> -
<input type="text" name="txtID3" id="txtID3" style="width:40px" align="left" maxlength=5 onkeyup="keyup(this,event)" onkeypress="return Numbers(event)" /> -
<input type="text" name="txtID4" id="txtID4" style="width:20px" align="left" maxlength=2 onkeyup="keyup(this,event)" onkeypress="return Numbers(event)" /> -
<input type="text" name="txtID5" id="txtID5" style="width:12px" align="left" maxlength=1 onkeyup="keyup(this,event)" onkeypress="return Numbers(event)" /><br>
</form>
</div>
</body>
</html>
|
ประวัติการแก้ไข
2014-03-04 09:10:25
2014-03-04 09:27:18
 |
 |
 |
 |
| Date :
2014-03-04 08:58:33 |
By :
apisitp |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
โค๊ดนี้ใช้ร่วมกับ jQuery นะครับ
1. ต้องเพิ่ม class="my_number" ให้กับ input ทุกช่อง
2. ต้องเพิ่ม id="xxxx" ให้เหมือน name= ของทุกช่อง
Code (JavaScript)
<script>
function setFocus(xId)
{
document.getElementById(xId).focus();
}
$( ".my_number" ).keyup(function( event ) {
var xVal = $(this).val();
var xName = $(this).attr('name');
//var lastChar = xName.substr(xName.length - 1);
var lastChar = xName.replace('num', '');
if(parseInt(lastChar) > 1){
if(xVal=='') setFocus('num' + (parseInt(lastChar)-1) );
}
});
</script>
--------
ลองเล่นดูแล้วเจอบัก var lastChar = xName.substr(xName.length - 1);
ถ้าเลข 2 หลักจะทำงานไม่ได้ 555+
|
ประวัติการแก้ไข
2014-03-04 10:01:26
| |
|
|
| |
| Date :
2014-03-04 09:54:38 |
By :
{Cyberman} |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (PHP)
<input type="text" maxlength="1" value="" size="3" />-
<input type="text" maxlength="1" value="" size="3" />-
<input type="text" maxlength="1" value="" size="4" />
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
$(function(){
$('input[type=text]').keyup(function(e){
if($(this).val().length==$(this).attr('maxlength')){
$(this).next(':input').focus();
}else{
$(this).prev(':input').focus();
}
})
})
</script>
|
| |
|
|
| |
| Date :
2014-03-04 10:48:29 |
By :
Ex-[S]i[L]e[N]t |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณพี่ๆๆทุกๆท่านมากๆๆครับ จะเอาไปทดลองเล่นก่อนนะครับ 
|
| |
|
|
| |
| Date :
2014-03-04 15:44:09 |
By :
pengbuts |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
แจ่ม...
