Javascript : Enter key press event

สร้าง Javascript เพื่อกำหนด Attributes ให้กับ Control เมื่อกดปุ่ม Enter แล้วจะเข้าไปทำงานตาม Event ที่กำหนดไว้ ตัวอย่างเช่น หน้าจอมี Control อยู่ 2 อัน คือ TextBox และ Button เมื่อพิมพ์ข้อความที่ TextBox แล้ว พอกดปุ่ม Enter ระบบจะเข้ามาทำงานที่ Event Click ของ Button ดังนั้นจึงต้องกำหนด Javascript ที่ TextBox เพื่อตรวจว่าผู้ใช้ Input ข้อมูลมาเป็น Enter หรือไม่ ตาม Code นี้

private void RegisterJavaScript() 
{
   TextBox1.Attributes.Add("OnKeyPress", "doClick('" + Button1.ClientID + "',event)");
}

Code ในส่วนนี้ต้องเรียกใช้ในส่วนของ PageLoad เพื่อกำหนด Attributes ให้กับ TextBox ทุกครั้งที่มีการโหลด Page ครั้ง 
แรก จากนั้นให้เขียน Javascript เพื่อเรียกใช้งาน function ที่กำหนดไว้ในตอนแรก ตาม Code นี้

<script type="text/javascript">
    function doClick(buttonName,e)
    {
        var key;
         if(window.event)
              key = window.event.keyCode;     //IE
         else
              key = e.which;     //firefox

        if (key == 13)
        {
            //Get the button the user wants to have clicked
            var btn = document.getElementById(buttonName);
            if (btn != null)
            { //If we find the button click it
                btn.click();
                event.keyCode = 0
            }
        }
   }   
</script>

ตรวจสอบ Mobile Devices ด้วย JavaScript

วันนี้จะมาแนะนำวิธีง่ายๆในการตรวจสอบว่าผู้ใช้เข้าใช้งานเว็บเพจด้วยอุปกรณ์ใด โดยใช้ javascript ชื่อว่า Navigator userAgent (อ้างอิง) ซึ่งมีหน้าที่คืนค่า user-agent header ของ Browser ที่ถูกส่งไป Server

ตัวอย่างการใช้งาน
<script>
   document.write("User-agent header sent: " + navigator.userAgent);

</script>

outout
mozilla/5.0 (windows nt 6.1; wow64) applewebkit/537.36 (khtml, like gecko) chrome/28.0.1500.72 safari/537.36

ต่อไปลองมาประยุกต์ใช้โดยการตรวจสอบตอน Page Load ว่าผู้ใช้เข้าใช้งา่นเว็บไซต์เราด้วยอุปกรณ์ใด ในตัวอย่างนี้จะเขียน Code เพื่อตรวจสอบว่าผู้ใช้เข้าใช้งานด้วย iPhone หรือไม่

  <script>
        $(document).ready(function () {
            var deviceIphone = "iphone";

            // Initialize user agent ใหัเป็นตัวเล็กทั้งหมด
            var uagent = navigator.userAgent.toLowerCase();

            // ตรวจสอบว่า user agent เป็นของอุปกรณ์ iPhone หรือไม่
            if (uagent.search(deviceIphone) > -1)
                document.write('Access with iPhone');
            else
                document.write('Access with Other Device');
        });
    </script>

เก็บ Dropdownlist Value ก่อนเกิด Change Event

HTML -  สร้าง DropdownList และ div ที่ต้องการแสดงผลการทดสอบ

Reference jQuery ในส่วนของ .js และ css

Javascript - ใช้ script ทำงานโดย เลือก Dropdown ที่มี Name = 'test' และกำหนดให้มีการเก็บค่า Value เมื่อเกิด Event Focus ที่ Control จากนั้นเมื่อเกิด Event Change ในตัวอย่างนี้จะแสดงค่า Value ของ Dropdown ที่ div prevSelect ก่อนที่จะมีการเปลี่ยน Value ในที่นี้อาจจะประยุกต๋ใช้โดยเก็บค่าลง Hidden Field ก็ได้

OUTPUT