พิเศษ 34 การใช้ปุ่มต่างๆบนแป้นพิมพ์
ทดลองกดปุ่มต่างๆบนแป้นพิมพ์ของคุณสิครับ ลองกดปุ่ม Shift หรือ Ctrl ค้างแล้วกดปุ่มอื่นๆ และลองเปลี่ยนภาษาพิมพ์ตัวอักษรไทยดูสิครับ แล้วจะมีอะไรดีๆ เล่นได้เพลินๆ(แต่ไม่ไร้สาระนะครับ) ขึ้นมาในตารางด้านล่างนี้...
| shiftKey | ctrlKey | altKey | keyCode | อักษรหรือสัญลักษณ์ | |
| onkeypress | |||||
| onkeydown | false | true | false | 67 | C |
| onkeyup | กดปุ่มค้างอยู่ | ||||
และนี่เป็นโค้ดที่สร้างและเปลี่ยนเนื้อหาในตารางเมื่อกดปุ่ม (ดูผ่านๆไปก่อน ยังไม่ต้องสนใจครับ)
<script language="javascript">
document.onkeypress=d1
document.onkeydown=d2
document.onkeyup=d3
function d1()
{b1.innerHTML=event.shiftKey
b2.innerHTML=event.ctrlKey
b3.innerHTML=event.altKey
b4.innerHTML=event.keyCode
b5.innerHTML=String.fromCharCode(event.keyCode)}
function d2()
{c1.innerHTML=event.shiftKey
c2.innerHTML=event.ctrlKey
c3.innerHTML=event.altKey
c4.innerHTML=event.keyCode
c5.innerHTML=String.fromCharCode(event.keyCode)
e.innerHTML="กดปุ่มค้างอยู่"}
function d3()
{e.innerHTML="เพิ่งจะปล่อยปุ่ม"}
</script>
<center><table border=1 style="font-size:28px;text-align:center;width:80%">
<tr><td width=20%><td width=15%>shiftKey
<td width=15%>ctrlKey<td width=15%>altKey
<td width=15%>keyCode<td width=15%>อักษรหรือสัญลักษณ์
<tr><td>onkeypress<td><a id="b1"></a>
<td><a id="b2"></a><td><a id="b3"></a>
<td><a id="b4"></a><td><a id="b5"></a>
<tr><td>onkeydown<td><a id="c1"></a>
<td><a id="c2"></a><td><a id="c3"></a>
<td><a id="c4"></a><td><a id="c5"></a>
<tr><td>onkeyup<td colspan=5><a id="e">ยังไม่ได้กดปุ่ม</a>
</table></center>
แต่ละปุ่มของแป้นพิมพ์ จะมีเลขโค้ด(keyCode)ที่เขา(คนที่คิดขึ้น)กำหนดไว้แล้ว รู้สึกว่าจะเป็นเลขโค้ดของ ASCII(เป็นรหัสอักษรหรืออะไรสักอย่างที่ผมไม่รู้ครับ ใครรู้ช่วยบอกผมที จะได้ลงคำอธิบายในนี้ให้ถูกต้อง) สังเกตได้ว่าเลขโค้ดของอักษรไทยมีค่าเป็นสามพันกว่า ตัวอักษร a ถึง z เป็นโค้ดเรียงกัน ตั้งแต่ 97 ถึง 122 สำหรับคำสั่ง onkeypress ซึ่งเลขโค้ดไม่ตรงกับเลขจากคำสั่ง onkeydown นั้นไม่ต้องกังวลครับ(ผมไม่รู้) ก็เขากำหนดมาแบบนี้น่ะครับ
การให้ผลของ onkeypress onkeydown และ onkeyup
· onkeypress ---> (ฝรั่งบอกว่า)จะให้ผลต่อเนื่องเมื่อกดปุ่มค้างไว้ (ลองทำดูครับ แล้วดูผลที่เกิดด้านล่าง)
· onkeydown ---> (ฝรั่งบอกว่า)จะให้ผลครั้งแรกและครั้งเดียวเมื่อเริ่มกดปุ่ม (แต่ลองทำดูครับ แล้วดูผลที่เกิดด้านล่าง ผมใช้คนละค่ากับ onkeypress แล้วนะครับ)
22
· onkeyup ---> จะให้ผลครั้งเดียวเมื่อปล่อยปุ่ม (ลองกดค้างแล้วปล่อยดูครับ แล้วดูผลที่เกิดด้านล่าง)
ในโค้ดข้างบน ผมใช้ 3 คำสั่งนี้กับ document ซึ่งหมายถึงเนื้อหาในหน้าต่างนี้นั่นเอง แล้วส่งค่าต่างๆด้านล่างนี้เข้าไปในตารางด้วย คำสั่ง innerHTML
event.shiftKey คือ สถานะของปุ่ม Shift หากมีค่าเป็น true ก็หมายถึงถูกกดปุ่ม Shift ไปแล้ว หากค่าเป็น false ก็คือ ยังไม่ได้กด
event.ctrlKey คือ สถานะของปุ่ม Ctrl
event.altKey คือ สถานะของปุ่ม Alt
event.keyCode คือ เลขโค้ดของปุ่มบนแป้นพิมพ์
String.fromCharCode(event.keyCode) คือ ตัวหนังสือหรือสัญลักษณ์จากเลขโค้ดนั้นๆ
ตัวอย่างพื้นฐานของการใช้ปุ่มใดปุ่มหนึ่ง
<script language="javascript">
document.onkeydown=x
function x()
{if(event.keyCode==120)
{document.title="คุณกำลังกดปุ่ม F9 อยู่"}}
document.onkeyup=x2
function x2()
{document.title="พิเศษ 34 การใช้ปุ่มต่างๆบนแป้นพิมพ์"}
</script>
ลองกดปุ่ม F9 ค้างไว้สิครับ แล้วจะเห็นผลของโค้ดนี้บนหัวข้อหน้าต่าง(title) สิ่งที่ทำให้เจาะจงปุ่มที่จะเลือกใช้ได้คือการกำหนดเงื่อนไข if ในตัวอย่างนี้ใช้ if(event.keyCode==120) ซึ่งเลข 120 เป็นเลขโค้ดของปุ่ม F9 (รู้ได้จากตารางข้างบนครับ) ซึ่งเมื่อผู้ใช้กดปุ่ม F9 เงื่อนไขจะเป็นจริง แล้วทำให้ title เปลี่ยน เมื่อผู้ใช้ปล่อยปุ่ม(onkeyup) title ก็จะเปลี่ยนมาเป็นดังเดิม
ตัวอย่างการใช้ในโค้ด HTML
ไม่จำเป็นที่จะต้องวางทั้งสามคำสั่งดังกล่าวไว้ในจาวาสคริปเท่านั้น คุณสามารถวางไว้ในคำสั่ง HTML เหมือนกับที่ใช้ onClick หรือ on... ต่างๆที่ใช้กับเมาส์ แต่ต้องเป็นคำสั่งที่สามารถใช้แป้นพิมพ์ได้ คุณลองพิมพ์ตัวหนังสือและตัวเลขลงไปในกล่องข้อความข้างล่างนี้สิครับ...
จะเห็นได้ว่า alert จะขึ้นมาเฉพาะเมื่อคุณพิมพ์ตัวเลขลงไปเท่านั้น เพราะว่าผมใช้
onkeypress="if(event.keyCode>=48&&event.keyCode<=57)
{alert('คุณกดเลข ' +String.fromCharCode(event.keyCode))} ไปวางไว้ในคำสั่ง input ที่ใช้สร้างกล่องข้อความนี้ เลขโค้ดของปุ่ม 0 ก็คือ 48 เลขโค้ดของปุ่ม 1 ก็คือ 49 ไล่เรียงไปเรื่อยๆจนถึงเลขโค้ดของปุ่ม 9 ก็คือ 57 จึงเป็นที่มาของการกำหนดเงื่อนไขนั้นครับ
คุณสามารถนำรูปแบบตัวอย่างนี้มาสร้างแบบฟอร์ม ที่คุณไม่ต้องการให้ผู้ใช้พิมพ์ตัวเลขลงไป โดยเพิ่มคำสั่งที่จะทำให้ค่า(value) ในกล่องข้อความหายไปหมด หลังจากพิมพ์ตัวเลขลงไป
เท่าที่ผมเล่นอินเตอร์เน็ตมา มีน้อยเว็บที่ให้ผู้ใช้กดแป้นพิมพ์เพื่อวัตถุประสงค์อื่น นอกจากกรอกแบบฟอร์ม กรอก password ซึ่งการที่ไม่นำมาใช้กัน อาจเป็นเพราะความไม่สะดวกไม่เหมือนกับใช้เมาส์ละมั้งครับ อีกอย่างคือแป้นพิมพ์ของแต่ละคนอาจไม่เหมือนกัน มีหลายมาตรฐาน ทำให้ keyCode ต่างกันรึเปล่าไม่ทราบได้ครับ แต่ตอนนี้คุณก็ได้ทราบแล้ว ว่านอกจากเมาส์แล้ว ยังมีการโต้ตอบกับผู้ใช้ได้อีกทางคือ แป้นพิมพ์ ก็แล้วแต่คุณจะนำไปใช้ครับ (ผมเคยเอามาใช้ควบคุมสิ่งต่างๆในเกมที่สร้างขึ้นครับ) อ้อ... ยังไม่จบครับ เวลาที่คุณเขียนเว็บ ตัวหนังสือคุณพิมพ์ลงไปในโค้ด เวลาแสดงออกมา ก็จะเป็นตัวอักษรเดียวกับในโค้ดใช่มั้ยครับ แต่ผมขอให้คุณ copy ตัวประหลาดบรรทัดล่างนี้ลงไปในโปรแกรมที่คุณเขียนเว็บ แล้ว save เป็นไฟล์ HTML แล้วเปิดออกมาดูสิครับ
สวัสดี
เป็นไงบ้างครับ... นี่เป็นการนำเลขโค้ดมาใช้ในการเขียนแทนตัวอักษร โดยต้องใช้สัญลักษณ์ &# นำหน้าเลขโค้ด โดยคุณสามารถดูเลขโค้ดโดยได้จากตารางข้างบนของ onkeyprees หากคุณใช้เลขโค้ดอักษรที่ไม่มีอยู่ในเครื่องของคุณ เช่น ྠ✐ เวลาแสดงผลก็จะได้สัญลักษณ์สี่เหลี่ยมแบบนี้... ྠ✐ แล้วมันจะมีประโยชน์อะไรน่ะหรือครับ พิมพ์ก็ยาวกว่า แถมต้องมากดหาเลขโค้ดอีก ...เอ่อ... ผมก็ยังไม่เคยนำความรู้นี้ไปใช้ประโยชน์อะไร ถือว่าเป็นความรู้ไว้ เผื่อคุณอาจค้นพบประโยชน์ของเลขโค้ดนี้ในอนาคต... คุณลองกดปุ่มบนแป้นพิมพ์ แล้วดูตารางด้านล่างสิครับ
| shiftKey | ctrlKey | altKey | keyCode | อักษรหรือสัญลักษณ์ | |
| onkeypress | |||||
| onkeydown | false | true | false | 67 | C |
| onkeyup | |||||
ตารางนี้แทบจะเหมือนกับตารางข้างบนทุกอย่าง ต่างกันแค่เพียงกำหนดให้ใช้ตัวอักษร(Font) แบบ symbol(สัญลักษณ์) เท่านั้น (เพิ่ม font-family:symbol เข้าไปในคำสั่ง style ภายในคำสั่ง table) และผมมีเปลี่ยนชื่อ id ใหม่เพื่อไม่ให้ซ้ำกับตารางข้างบน (หากอ่านย่อหน้านี้ไม่เข้าใจ โปรดเข้าไปดูในเรื่อง CSS) ตารางนี้สามารถช่วยให้คุณหาสัญลักษณ์ที่คุณต้องการได้ว่า อยู่ที่ปุ่มใด และเวลานำไปใช้ก็ให้กำหนด Font เป็น symbol ด้วยครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น