ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้

เมื่อเลือก select text กรอกได้แต่ตัวเลข

ถาม-ตอบ แนะนำไอเดีย โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา เมื่อเลือก select text กรอกได้แต่ตัวเลข

ปัจจุบัน นักพัฒนาสามารถ ใช้ ChatGPT | Gemini | Claude | Perplexity | Deepseek ช่วยในการแก้ไขปัญหาต่างๆ ในการเขียนโปรแกรม หรือหาข้อมูลเพิ่มเติมได้ง่ายและสะดวก แนะนำให้ทุกคนใช้งานเพื่อพัฒนาศักยภาพของตัวเอง

เมื่อเลือก select text กรอกได้แต่ตัวเลข

เมื่อเลือก รหัสสมาชิก ที่ select text จะกรอกได้แต่ตัวเลข
เมื่อเลือก ชื่อ ที่ select text ก็จะกรอกได้ภาษาไทย หรือ ภาษาอังกฤษ เท่านั้น

ไม่ทราบว่าจะเขียนโค๊ด ยังไง เขียนตรงไหน ช่วยทีนะครับ มือใหม่ มาก ๆ ขอบคุณมากครับ

Jame Pasakorn 17-10-2018 20:39:06

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ดูตัวอย่างจากโค้ดด้านล่างเป็นแนวทาง

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</head>
<body>

  <input type="text" id="obj1" name="obj1" patern="">
  <select id="obj2" name="obj2">
    <option value="0">Select</option>
    <option value="rx1">Case 1</option>
    <option value="rx2">Case 2</option>
  </select>
  <script>
    $(function(){
      $("#obj2").on("change",function(){ // เมื่อเปลี่ยนตัวเลือก
	  	// กำหนดรูปแบบที่จะตรวจสอบไว้ใน object โดยกำหนด property ให้มีค่าเท่ากับ value ของ select
		var paternObj = {
			rx1:"^[0-9]$",
			rx2:"^[a-zA-Zก-๏\s]+$"
		};
		var selectPatern = paternObj[$(this).val()]; //  กำหนดการใช้ค่ารูปแบบ จากการเลือก select
        $("#obj1").attr("patern",selectPatern); // นำรูปแบบที่เลือกไปใช้ใน input text
      });
      $("#obj1").on("keypress",function(e){ // เมื่อป้อนข้อมูล
        var rx = new RegExp($(this).attr("patern")); // กำหนดรูปแบบการตรวจสอบ
        var chkval = String.fromCharCode(e.keyCode); // ตัวอักษรที่กดเข้ามา
        return rx.test(chkval); // ค้นค่าการตรวจสอบข้อมูล
      });
      
    });
  </script>
</body>
</html>

ตัวอย่าง

สามารถนำไปประยุกต์เพิ่มเติมได้

การประยุกต์และใช้งาน form validation ที่ bootstrap 4 เตรียมมาให้ http://niik.in/874

https://www.ninenik.com/content.php?arti_id=874 via @ninenik

>>> อัพเดท >>> 18-10-2018
------------------------------------------

หากต้องการล้างค่า input text ทุกครั้งเมื่อเปลี่ยนค่าการเลือก select

ให้แก้ไขจาก

$("#obj1").attr("patern",selectPatern); // นำรูปแบบที่เลือกไปใช้ใน input text

เป็น

$("#obj1").val('').attr("patern",selectPatern); // นำรูปแบบที่เลือกไปใช้ใน input text

หากต้องการป้องกันการ copy แล้ว paste ให้เพิ่ม paste event เข้าไป แล้วตรวจสอบ

event.type และคืนค่า false ถ้ามีการเรียกใช้ paste event ดังนี้

$("#obj1").on("keypress paste",function(e){ // เมื่อป้อนข้อมูล
	if(e.type=='paste'){ return false; }	  
	var rx = new RegExp($(this).attr("patern")); // กำหนดรูปแบบการตรวจสอบ
	var chkval = String.fromCharCode(e.keyCode); // ตัวอักษรที่กดเข้ามา
	return rx.test(chkval); // ค้นค่าการตรวจสอบข้อมูล
});

>>> อัพเดท >>> 18-10-2018
------------------------------------------

แนวทางตรวจข้อมูลเฉพาะภาษาไทย ภาษาอังกฤษด้วย Regular Expression http://niik.in/877

https://www.ninenik.com/content.php?arti_id=877 via @ninenik

>>> อัพเดท >>> 19-10-2018
------------------------------------------
เนื่องจากในการใช้งานผ่านมือถือ จะไม่สามารถใช้ keypress event ได้ หากต้องการรองรับให้เปลี่ยนจากการใช้งาน keypress เป็น
keydown และ keyup event ตามโค้ดด้านล่าง

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Jquery Keypress Change Patern</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>

<input type="text" id="obj1" name="obj1" patern="">
<select id="obj2" name="obj2">
  <option value="0">Select</option>
  <option value="rx1">Case 1</option>
  <option value="rx2">Case 2</option>
</select>
<script>
	$(function(){
	
		var oldVal = null;
		var pressed = false;		
		$("#obj2").on("change",function(){ // เมื่อเปลี่ยนตัวเลือก
			// กำหนดรูปแบบที่จะตรวจสอบไว้ใน object โดยกำหนด property ให้มีค่าเท่ากับ value ของ select
			var paternObj = {
				rx1:"^[0-9]$",
				rx2:"^[a-zA-Zก-๏\\s]+$"
			};
			var selectPatern = paternObj[$(this).val()]; //  กำหนดการใช้ค่ารูปแบบ จากการเลือก select
			$("#obj1").val('').attr("patern",selectPatern); // นำรูปแบบที่เลือกไปใช้ใน input text
			oldVal = '';
		});
		
		$("#obj1").on("keydown keyup paste",function(e){ // เมื่อป้อนข้อมูล	  	
			if(e.type=='paste'){ return false; }  
			if(e.type=='keydown'){
				if(!pressed){
					pressed = true;
					var keyP = e.keyCode || event.charCode;
					if( keyP == 8 || keyP == 46 ){  // กรณีลบค่าด้วยปุ่ม backspace
					
					}else{       			  
						if($(this).val()!=""){
							oldVal = $(this).val();
						}else{
							oldVal = '';
						}
					}
				}
			}else{
				pressed = false;
				var keyP = e.keyCode || event.charCode;
				if(keyP == 8 || keyP == 46 ){ // กรณีลบค่าด้วยปุ่ม backspace
					oldVal = $(this).val();  
				}else{
					var rx = new RegExp($(this).attr("patern")); // กำหนดรูปแบบการตรวจสอบ
					var chkval = $(this).val(); // ตัวอักษรที่กดเข้ามา
					chkval = chkval.substr(-1);
					if(!chkval.match(rx)){
						$(this).val(oldVal);
					}else{
						oldVal = $(this).val();  
					}
				}
			}
		});
	
	});
</script>
</body>
</html>

ninenik 18-10-2018

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน