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

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

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

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


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

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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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 


>>>  อัพเดท >>> 18-10-2018
------------------------------------------
หากต้องการล้างค่า input text ทุกครั้งเมื่อเปลี่ยนค่าการเลือก select 
ให้แก้ไขจาก
 
1
$("#obj1").attr("patern",selectPatern); // นำรูปแบบที่เลือกไปใช้ใน input text
 
เป็น
 
1
$("#obj1").val('').attr("patern",selectPatern); // นำรูปแบบที่เลือกไปใช้ใน input text
 
หากต้องการป้องกันการ copy แล้ว paste ให้เพิ่ม paste event เข้าไป แล้วตรวจสอบ
event.type และคืนค่า false ถ้ามีการเรียกใช้ paste event ดังนี้
 
1
2
3
4
5
6
$("#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 


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!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
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ