ฉันใช้keypressผู้ฟังเช่น ..

addEventListener("keypress", function(event){

}

อย่างไรก็ตามดูเหมือนจะไม่พบ backspace ที่ลบข้อความ ...

มีผู้ฟังคนอื่นที่ฉันสามารถใช้ตรวจจับสิ่งนี้ได้หรือไม่?

เหตุการณ์ KeyPress จะเรียกเฉพาะสำหรับตัวอักษร (พิมพ์) กุญแจ KeyDown เหตุการณ์ถูกยกขึ้นทั้งหมดรวมทั้งไม่สามารถพิมพ์ได้เช่นControl, Shift, Alt, BackSpaceฯลฯ

UPDATE:

เหตุการณ์ keypress จะเริ่มทำงานเมื่อกดปุ่มและตามปกติคีย์นั้นจะสร้างค่าอักขระ

การอ้างอิง

ลองแทนkeydownkeypress

เหตุการณ์ที่เกิดขึ้นในแป้นพิมพ์คำสั่งนี้: keydown, keyup,keypress

ปัญหาเกี่ยวกับ backspace น่าจะเป็นที่เบราว์เซอร์จะนำทางกลับไปkeyupและทำให้หน้าของคุณจะไม่เห็นkeypressเหตุการณ์

keypressเหตุการณ์อาจจะแตกต่างกันในเบราว์เซอร์

ฉันสร้างJsfiddleเพื่อเปรียบเทียบเหตุการณ์แป้นพิมพ์ (โดยใช้ทางลัด JQuery) บน Chrome และ Firefox ขึ้นอยู่กับเบราว์เซอร์ที่คุณใช้keypressงานอยู่จะถูกเรียกใช้หรือไม่ - Backspace จะเรียกใช้keydown/keypress/keyupใน Firefox แต่เฉพาะkeydown/keyupใน Chrome

เหตุการณ์ keyclick เดียวที่ถูกเรียก

บน Chrome

• keydown/keypress/keyupเมื่อเบราว์เซอร์ลงทะเบียนอินพุตของแป้นพิมพ์ ( keypressถูกไล่ออก)

• keydown/keyup ถ้าไม่มีคีย์บอร์ด (ทดสอบด้วย alt, shift, backspace, ปุ่มลูกศร)

• keydown เฉพาะแท็บ?

บน Firefox

• keydown/keypress/keyupเมื่อเบราว์เซอร์ลงทะเบียนอินพุตของแป้นพิมพ์ แต่สำหรับแบ็คสเปซปุ่มลูกศรแท็บ (ดังนั้นที่นี่keypressจะทำงานแม้ว่าจะไม่มีอินพุต)

• keydown/keyup สำหรับ alt, shift

สิ่งนี้ไม่น่าแปลกใจเพราะเป็นไปตามhttps://api.jquery.com/keypress/ :

หมายเหตุ: เนื่องจากเหตุการณ์ของปุ่มกดไม่ได้ครอบคลุมถึงข้อกำหนดอย่างเป็นทางการพฤติกรรมที่เกิดขึ้นจริงเมื่อใช้งานอาจแตกต่างกันไปในเบราว์เซอร์เวอร์ชันของเบราว์เซอร์และแพลตฟอร์ม

การใช้ประเภทเหตุการณ์แป้นกดถูกเลิกใช้โดย W3C ( http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress )

ชนิดเหตุการณ์ keypress ถูกกำหนดในข้อมูลจำเพาะนี้สำหรับการอ้างอิงและความสมบูรณ์ แต่ข้อมูลจำเพาะนี้เลิกใช้งานประเภทเหตุการณ์นี้ เมื่ออยู่ในการแก้ไขบริบทผู้เขียนสามารถสมัครสมาชิกไปยังเหตุการณ์ beforeinput แทน

สุดท้ายเพื่อตอบคำถามของคุณคุณควรใช้keyupหรือkeydownตรวจสอบ backspace ใน Firefox และ Chrome

ลองที่นี่:

$(".inputTxt").bind("keypress keyup keydown", function (event) {
    var evtType = event.type;
    var eWhich = event.which;
    var echarCode = event.charCode;
    var ekeyCode = event.keyCode;

    switch (evtType) {
        case 'keypress':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        case 'keyup':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<p>");
            break;
        case 'keydown':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        default:
            break;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="inputTxt" type="text" />
<div id="log"></div>

สิ่งที่ฉันเขียนขึ้นในกรณีที่ทุกคนเจอปัญหากับคนที่กดปุ่ม Backspace ในขณะที่คิดว่าพวกเขาอยู่ในเขตข้อมูลฟอร์ม

window.addEventListener("keydown", function(e){
    /*
     * keyCode: 8
     * keyIdentifier: "U+0008"
    */
    if(e.keyCode === 8 && document.activeElement !== 'text') {
        e.preventDefault();
        alert('Prevent page from going back');
    }
});

การควบคุมเชิงตัวเลขของฉัน:

function CheckNumeric(event) {
    var _key = (window.Event) ? event.which : event.keyCode;
    if (_key > 95 && _key < 106) {
        return true;
    }
    else if (_key > 47 && _key < 58) {
        return true;
    }
    else {
        return false;
    }
}

<input type="text" onkeydown="return CheckNumerick(event);" />

ลองมัน

รหัสคีย์ BackSpace คือ 8

event.key === "Backspace"

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

note.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace") {
        // Do something
    }
});

เอกสาร Mozilla

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

ใช้หนึ่งใน keyup / keydown / beforeinput เหตุการณ์แทน

จากการอ้างอิงนี้การกดปุ่มจะเลิกใช้แล้วและไม่แนะนำอีกต่อไป

เหตุการณ์ keypress จะเริ่มทำงานเมื่อคีย์ที่สร้างค่าตัวอักษรถูกกดลง ตัวอย่างของคีย์ที่สร้างค่าอักขระคือคีย์ตัวอักษรตัวเลขและเครื่องหมายวรรคตอน ตัวอย่างของคีย์ที่ไม่สร้างค่าตัวอักษรคือคีย์ตัวดัดแปลงเช่น Alt, Shift, Ctrl หรือ Meta

ถ้าคุณใช้ "beforeinput" จะระมัดระวังเกี่ยวกับเรื่องของการทำงานร่วมกันเบราว์เซอร์ ความแตกต่างระหว่าง "beforeinput" และอีกสองรายการคือ "beforeinput" ถูกเรียกใช้เมื่อค่าอินพุตกำลังจะเปลี่ยนแปลงดังนั้นด้วยอักขระที่ไม่สามารถเปลี่ยนค่าอินพุตได้มันจะไม่ถูกไล่ออก (เช่น shift, ctr, alt)

ฉันมีปัญหาเดียวกันและโดยใช้ keyup มันก็แก้ไข