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

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

เมื่อเลือก 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 บาท หรือ ระบุจำนวน