จะรู้ได้อย่างไรว่ากดปุ่มอักขระใด

118

ฉันต้องการทราบว่ามีการกดปุ่มอักขระใดในวิธีที่เข้ากันได้กับข้ามเบราว์เซอร์ใน Javascript แท้

javascript dom-events keypress

1

ไม่ได้คำตอบเหล่านี้ทั้งหมดสำหรับคำถามที่ว่า "สิ่งที่สำคัญคือการกด?" จะเกิดอะไรขึ้นถ้าในขณะที่กำลังดำเนินการโค้ดจาวาสคริปต์ต้องการทราบว่าขณะนี้คีย์บนแป้นพิมพ์ค้างอยู่หรือไม่?

— mwardm

2

event.keyจะให้ถ่านกดโดยตรง

— Gibolt

158

JavaScript "ชัดเจน":

<script type="text/javascript">
  function myKeyPress(e){
    var keynum;

    if(window.event) { // IE                    
      keynum = e.keyCode;
    } else if(e.which){ // Netscape/Firefox/Opera                   
      keynum = e.which;
    }

    alert(String.fromCharCode(keynum));
  }
</script>

<form>
  <input type="text" onkeypress="return myKeyPress(event)" />
</form>

JQuery:

$(document).keypress(function(event){
  alert(String.fromCharCode(event.which)); 
});

— Coyod
แหล่งที่มา

6

สิ่งนี้ใช้ได้กับตัวอักษร แต่สิ่งที่เกี่ยวกับจุด / วงเล็บและสัญลักษณ์ประเภทอื่น ๆ ?

— VoVaVc

6

@VoVaVc: มันก็ใช้ได้เช่นกัน สิ่งสำคัญคือการใช้keypressเหตุการณ์ซึ่งให้รหัสอักขระแทนkeyupหรือkeydownให้รหัสคีย์แก่คุณ

— Tim Down

2

@aljgom e.keyยังไม่รองรับเบราว์เซอร์เต็มรูปแบบ

— Andy Mercer

1

ใช้ไม่ได้กับสัญลักษณ์ที่คุณต้องกด shift เพื่อสร้างเช่น!

— Curtis

5

ขณะนี้คีย์ @AndyMercer รองรับเบราว์เซอร์หลักทั้งหมดแล้ว: developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…

— Ray

34

มีคำถามที่ซ้ำกันเป็นล้านรายการที่นี่ แต่จะเกิดขึ้นอีกครั้ง:

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    alert(charStr);
};

การอ้างอิงที่ดีที่สุดเกี่ยวกับเหตุการณ์ที่สำคัญที่ผมเคยเห็นเป็นhttp://unixpapa.com/js/key.html

— ทิมลง
แหล่งที่มา

23

อื่น ๆ event.keyที่ผ่านมาและทำความสะอาดมากใช้งาน: ใช้ ไม่มีรหัสตัวเลขตามอำเภอใจอีกต่อไป!

หมายเหตุ: คุณสมบัติเก่า ( .keyCodeและ.which) เลิกใช้งาน

node.addEventListener('keydown', function(event) {
    const key = event.key; // "a", "1", "Shift", etc.
});

หากคุณต้องการตรวจสอบให้แน่ใจว่าได้ป้อนอักขระเพียงตัวเดียวให้ตรวจสอบkey.length === 1หรือว่าเป็นอักขระที่คุณต้องการ

Mozilla Docs

เบราว์เซอร์ที่รองรับ

— Gibolt
แหล่งที่มา

สำหรับ node.js หรือไม่

— merrybot

ไม่โหนดหมายถึงองค์ประกอบ DOM เท่านั้น หากคุณมี Node.js ที่เชื่อมต่อกับ UI ฉันคิดว่ามันจะใช้งานได้

— Gibolt

คีย์ดาวน์สำหรับอุปกรณ์มือถือบางเครื่องไม่ทำงานกลับไม่ได้กำหนด

— Angelotti

4

ลอง:

<table>
<tr><td>Key:</td><td id="key"></td></tr>
<tr><td>Key Code:</td><td id="keyCode"></td></tr>
<tr><td>Event Code:</td><td id="eventCode"></td></tr>
</table>
<script type="text/javascript">
window.addEventListener("keydown", function (e) {
  //tested in IE/Chrome/Firefox
  document.getElementById("key").innerHTML = e.key;
  document.getElementById("keyCode").innerHTML = e.keyCode;
  document.getElementById("eventCode").innerHTML = e.code;
})
</script>

ขยายข้อมูลโค้ด

* หมายเหตุ: ใช้งานได้ใน "เรียกใช้ข้อมูลโค้ด"

เว็บไซต์นี้ทำเช่นเดียวกับรหัสของฉันด้านบน: Keycode.info

— lewdev
แหล่งที่มา

1

ใช้อันนี้:

function onKeyPress(evt){
  evt = (evt) ? evt : (window.event) ? event : null;
  if (evt)
  {
    var charCode = (evt.charCode) ? evt.charCode :((evt.keyCode) ? evt.keyCode :((evt.which) ? evt.which : 0));
    if (charCode == 13) 
        alert('User pressed Enter');
  }
}

— JCasso
แหล่งที่มา

1

**check this out** 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).keypress(function(e)
        {

            var keynum;
            if(window.event)
            { // IE                 
                keynum = e.keyCode;
            }
                else if(e.which)
                    { 
                    // Netscape/Firefox/Opera                   
                    keynum = e.which;
                    }
                    alert(String.fromCharCode(keynum));
                    var unicode=e.keyCode? e.keyCode : e.charCode;
                    alert(unicode);
        });
});  

</script>
</head>
<body>

<input type="text"></input>
</body>
</html>

— kki3908050
แหล่งที่มา

1

นี่ไม่ใช่คำตอบของ @ Coyod 2009 ที่ใกล้เคียงกันใช่หรือไม่

— Chris F Carroll

1

หนึ่งของห้องสมุดที่ชื่นชอบการทำเช่นนี้ในวิธีการที่ซับซ้อนเป็นกับดักหนู

มาพร้อมกับปลั๊กอินที่หลากหลายซึ่งหนึ่งในนั้นคือrecordปลั๊กอินที่สามารถระบุลำดับของปุ่มที่กด

ตัวอย่าง:

<script>
    function recordSequence() {
        Mousetrap.record(function(sequence) {
            // sequence is an array like ['ctrl+k', 'c']
            alert('You pressed: ' + sequence.join(' '));
        });
    }
</script>


<button onclick="recordSequence()">Record</button>

— dipole_moment
แหล่งที่มา

@DanLowe ฉันเพิ่งเพิ่มตัวอย่างข้อมูล

— dipole_moment

Uncaught TypeError: Mousetrap.record ไม่ใช่ฟังก์ชันที่ recordSequence (****. html: 12) ที่ HTMLButtonElement.onclick (****. html: 20)

— Irrmich

-2

document.onkeypress = function(event){
    alert(event.key)
}

— gomozor
แหล่งที่มา