Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > รบกวนหน่อยครับ เรื่องกด enter แล้วให้เคอร์เซอร์ Cursor เลื่อนไป input textbox ถัดไป



 

รบกวนหน่อยครับ เรื่องกด enter แล้วให้เคอร์เซอร์ Cursor เลื่อนไป input textbox ถัดไป

 



Topic : 060332



โพสกระทู้ ( 24 )
บทความ ( 0 )



สถานะออฟไลน์




สมุมติมี input text อยู่5ช่อง แล้วกด enter เคอร์เซอร์เลื่อนไป input ถัดไป ในกรณีที่ เคอร์เซอร์เลื่อนไปอยู่อันสุดท้ายแล้วผู้ใช้คลิกเมาท์ที่ input ช่องที่1 แล้วกดenter เคอร์เซอร์เลื่อนไปอยู่inputช่องที่สอง เนื่องจาก form มีเป็นจำนวนมาก ผมต้องการเขียนโค้ดแค่จุดเดียวแล้วมีผลทั้งเว็บ

โค๊ดปัจจุบันที่ใช้อยู่ครับ

Code (JavaScript)

function checkKeycode(e){
	var keycode;
	var element = document.forms[0].elements;
	//alert(document.forms[0].elements[f].type);
	//alert(element.length);
	
	if (window.event) keycode = window.event.keyCode; // ใช้ IE อ่ะ
	else if (e) keycode = e.which; // ใช้ Firefox เน่าะ
	
	
	if(keycode==13 && f<=element.length){
		document.forms[0].elements[f].focus();
		f=f+1;
		return false;	
	}
}

f=0;

document.onkeydown = checkKeycode;


ขอบคุณล่วงหน้าครับ



Tag : PHP, JavaScript






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2011-05-18 12:04:37 By : amphol2530 View : 11916 Reply : 11
 

 

No. 1



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

Code
<input name="text1" onKeyDown="if(event.keyCode==13){ text2.focus()}">
<input name="text2" onKeyDown="if(event.keyCode==13){ text3.focus()}">
<input name="text3">


Go to : เรื่อง Form ครับ อยากถามว่า ถ้าอยากให้ เรากด enter แล้วมันจะเลื่อนไป textbox ตัวต่อไป(ปกติต้องกด tab)

Go to : เมื่อกดTab แล้วให้ cursor ไป textfield ที่ต้องการ ตอนนี้คือ เมื่อกดTab 1 ครั้ง แล้ว cursor ไปที่ image

Go to : ปัญหากดปุ่ม enter แล้วระบบบันทึกข้อมูล กดปุ่ม enter แล้วให้ เคอเซอร์ เลื่อนตำแหน่งไปยัง textbox ถัดไป


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-05-18 12:09:23 By : webmaster
 


 

No. 2



โพสกระทู้ ( 24 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณครับ mr.win

ไม่ทราบพอมีวิธีที่เขียนโค๊ดจุดเดียวที่มีผลทั้งเว็บเลยหรือเปลาครับ คือ form มันเยอะมาก แก้ที่ละจุดผมกลัวพลาด
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-05-18 12:34:07 By : amphol2530
 

 

No. 3



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

อันนี้แบบสามารถ กรณีกด Up ก็จะเลื่อน Cursor ไปข้างบน


JavaScript
<form name="form1">
<input name="text1" onKeyDown="if(event.keyCode==13){ document.form1.text2.focus()}">
<input name="text2" onKeyDown="if(event.keyCode==13){ document.form1.text3.focus()}" onKeyUp="if(event.keyCode==38){ document.form1.text1.focus()}">
<input name="text3" onKeyUp="if(event.keyCode==38){ document.form1.text2.focus()}">
</form>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-06-09 15:39:11 By : webmaster
 


 

No. 4



โพสกระทู้ ( 515 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

Code (PHP)
<script>
function event_button(){
if(window.event.keyCode == 39){
window.event.keyCode = 9;
}
}
</script>
วันที่: <input type="text" value="<?=date('d');?>" size="2"/>- 
                    <input type="text" value="<?=date('m');?>" size="2"/>-<input type="text" value="<?=date('Y');?>" size="4"/>

ทำแบบนี้แล้วไม่สามารถย้อนกลับได้ค่ะถ้าจะทำแบบย้อนกลับได้ต้องทำอย่างไรค่ะ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-06-09 16:57:34 By : deedee2338
 


 

No. 5



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

ลองดูตัวอย่างที่ผมให้ก่อนหน้านี้ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-06-09 23:53:01 By : webmaster
 


 

No. 6



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

Code (JavaScript)
<html>
<head>
<title>ThaiCreate.Com Tutorial</title>
</head>
<body>
<form name="frmMain" action="" method="post">
<script language="JavaScript">
document.onkeydown = chkEvent 
	function chkEvent(e) {
		var keycode;
		if (window.event) keycode = window.event.keyCode; //*** for IE ***//
		else if (e) keycode = e.which; //*** for Firefox ***//
		if(keycode==13)
		{
			return false;
		}
	}

    function setNextFocus(objId){
        if (event.keyCode == 13){
            var obj=document.getElementById(objId);
            if (obj){
                obj.focus();
            }
        }
    }

</script>
Textbox 1 <input type="text" name="txt1" value="" onKeyDown="setNextFocus('txt2');"> <br>
Textbox 2 <input type="text" name="txt2" value="" onKeyDown="setNextFocus('txt3');"> <br>
Textbox 3 <input type="text" name="txt3" value=""><br>
<input type="submit" name="btnSubmit" value="Submit">
</form>
</body>
</html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-06-13 20:44:39 By : webmaster
 


 

No. 7



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

อีกตัวอย่าง ถ้า Textbox สุดท้าย สามารถกำหนดให้ Submit ได้

Code (JavaScript)
<html>
<head>
<title>ThaiCreate.Com Tutorial</title>
</head>
<body>
<form name="frmMain" action="" method="post">
<script language="JavaScript">
document.onkeydown = chkEvent 
	function chkEvent(e) {
		var keycode;
		if (window.event) keycode = window.event.keyCode; //*** for IE ***//
		else if (e) keycode = e.which; //*** for Firefox ***//
		if(keycode==13)
		{
			return false;
		}
	}

    function setNextFocus(objId){
        if (event.keyCode == 13){
			if(objId=='submit')
			{
				document.frmMain.submit();
			}
			else
			{
				var obj=document.getElementById(objId);
				if (obj){
					obj.focus();
				}
			}
        }
    }

</script>
Textbox 1 <input type="text" name="txt1" value="" onKeyDown="setNextFocus('txt2');"> <br>
Textbox 2 <input type="text" name="txt2" value="" onKeyDown="setNextFocus('txt3');"> <br>
Textbox 3 <input type="text" name="txt3" value="" onKeyDown="setNextFocus('submit');"><br>
<input type="submit" name="btnSubmit" value="Submit">
</form>
</body>
</html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-06-13 20:45:17 By : webmaster
 


 

No. 8



โพสกระทู้ ( 4 )
บทความ ( 0 )



สถานะออฟไลน์


เออ พี่ครับ จากกรณีคำสั่งโค๊ด ความคิดเห็นที่ 6 ถ้าเราต้องการกดปุ่ม Submit แล้วให้ปุ่มทำการแอคชั่นไปยังหน้าที่ต้องการทำงานต้องเขียนคำสั่งว่ายังงัยครับ

พอดีผมใช้คำสั่งว่า


Code (PHP)
        <tr>
          <td width="67"><div align="left" class="style6"><strong>ชื่อผู้เข้าใช้</strong></div></td>
          <td width="84"><label>
<input name="A01" type="text" id="A01" size="7" maxlength="20" onKeyDown="setNextFocus('A02');"/>
          </label></td>
        </tr>
        <tr>
          <td><div align="left" class="style5">รหัสผ่าน</div></td>
          <td><label>
            <input name="A02" type="password" id="A02" size="7" maxlength="20" onKeyDown="setNextFocus('btnOK');"/>
          </label></td>
        </tr>
        <tr>
          <td colspan="2"><div align="center">

            <input type="submit" name="btnOK" id="btnOK" value="ตกลง" onKeyDown="connect/checklogins.php"/>



ซึ่งผมเองใส่แบบนี้แล้วทดลองกดเพื่อให้ไปที่หน้า connect/checkins.php ซึ่งคำสั่งดังกล่าวไม่ยอมไป

ผมควรจะใส่อีเว้นต์ หรือว่า คำสั่งอะไรครับผม
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-10-17 14:21:10 By : ssru4045
 


 

No. 9



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

ตั้งกระทู้ใหม่ครับ เดียวจะไปตอบให้ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-10-17 16:38:56 By : webmaster
 


 

No. 10

Guest


<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#myForm input').keydown(function(e){
if(e.keyCode==13){

if($(':input:eq(' + ($(':input').index(this) + 1) + ')').attr('type')=='submit'){// check for submit button and submit form on enter press
return true;
}

$(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();

return false;
}

});
});
</script>
</head>
<body>
<form action="" id="myForm" >
<input type='text' name='firstField'>
<input type='text' name='secondField'>

<input type='text' name='secondField'>

<input type='text' name='secondField'>
<input type='submit'>
</form>
</body>
</html>
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-08-19 15:10:58 By : พรรณเครือ
 


 

No. 11



โพสกระทู้ ( 484 )
บทความ ( 3 )



สถานะออฟไลน์


ลองประยุกต์ใช้ จาก Code นี้ครับ

Code (PHP)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Scan Form</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$( document ).ready(function() {
	$( ".barcode" ).first().focus();
	$( ".barcode" ).keypress(function( event ) {
		if ( event.which == 13 ) {
			event.preventDefault();
			$(this).next().focus();
		}
	});
});
</script>
 </head>
 <body>
<?php
if( isset($_POST['submit']) )
{
	print_r($_POST['barcode']);
}
?>
<form name="frm1" method="post" action="">
	<input type="text" name="barcode[]" class="barcode">
	<input type="text" name="barcode[]" class="barcode">
	<input type="text" name="barcode[]" class="barcode">
	<input type="submit" name="submit">
</form>

</body>
</html>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-08-20 08:42:04 By : fossil31
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : รบกวนหน่อยครับ เรื่องกด enter แล้วให้เคอร์เซอร์ Cursor เลื่อนไป input textbox ถัดไป
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่