ฉันจะป้องกันไม่ให้คีย์ Backspace นำทางกลับได้อย่างไร

บน IE ฉันสามารถทำสิ่งนี้ได้ด้วย jQuery (ที่ไม่ได้มาตรฐาน แต่ทำงานได้)

if ($.browser.msie)
    $(document).keydown(function(e) { if (e.keyCode == 8) window.event.keyCode = 0;});

แต่เป็นไปได้ไหมที่จะทำงานใน Firefox หรือใช้เบราว์เซอร์ข้ามโบนัส?

สำหรับบันทึก:

$(document).keydown(function(e) { if (e.keyCode == 8) e.stopPropagation(); });

ไม่ทำอะไรเลย

$(document).keydown(function(e) { if (e.keyCode == 8) e.preventDefault(); });

แก้ปัญหา แต่ทำให้คีย์แบ็คสเปซไม่สามารถใช้งานได้บนหน้าซึ่งเลวร้ายยิ่งกว่าพฤติกรรมเดิม

แก้ไข: เหตุผลที่ฉันทำเช่นนี้คือฉันไม่ได้สร้างหน้าเว็บธรรมดา แต่เป็นแอปพลิเคชันขนาดใหญ่ มันน่ารำคาญอย่างมากที่จะสูญเสียงาน 10 นาทีเพียงเพราะคุณกด Backspace ผิดที่ อัตราส่วนของการป้องกันข้อผิดพลาดเทียบกับผู้ใช้ที่น่ารำคาญควรอยู่เหนือ 1,000/1 โดยการป้องกันคีย์ Backspace จากการนำทางด้านหลัง

แก้ไข 2: ฉันไม่พยายามป้องกันการนำทางประวัติศาสตร์เพียงแค่เกิดอุบัติเหตุ

EDIT3: @brentonstrines ความคิดเห็น (ย้ายมาที่นี่เนื่องจากคำถามดังกล่าวเป็นที่นิยมมาก): นี่คือ 'แก้ไข' ระยะยาว แต่คุณสามารถทิ้งการสนับสนุนของคุณไว้เบื้องหลังChromium bug เพื่อเปลี่ยนพฤติกรรมนี้ใน webkit

รหัสนี้แก้ปัญหาอย่างน้อยใน IE และ Firefox (ยังไม่ได้ทดสอบอื่น ๆ แต่ฉันให้โอกาสที่เหมาะสมในการทำงานหากปัญหายังคงอยู่ในเบราว์เซอร์อื่น ๆ )

// Prevent the backspace key from navigating back.
$(document).unbind('keydown').bind('keydown', function (event) {
    if (event.keyCode === 8) {
        var doPrevent = true;
        var types = ["text", "password", "file", "search", "email", "number", "date", "color", "datetime", "datetime-local", "month", "range", "search", "tel", "time", "url", "week"];
        var d = $(event.srcElement || event.target);
        var disabled = d.prop("readonly") || d.prop("disabled");
        if (!disabled) {
            if (d[0].isContentEditable) {
                doPrevent = false;
            } else if (d.is("input")) {
                var type = d.attr("type");
                if (type) {
                    type = type.toLowerCase();
                }
                if (types.indexOf(type) > -1) {
                    doPrevent = false;
                }
            } else if (d.is("textarea")) {
                doPrevent = false;
            }
        }
        if (doPrevent) {
            event.preventDefault();
            return false;
        }
    }
});

รหัสนี้ใช้ได้กับเบราว์เซอร์ทั้งหมดและกลืนกินคีย์ Backspace เมื่อไม่ได้อยู่ในองค์ประกอบของฟอร์มหรือหากปิดใช้งานองค์ประกอบของฟอร์ม | readOnly เท่านั้น นอกจากนี้ยังมีประสิทธิภาพซึ่งเป็นสิ่งสำคัญเมื่อมีการดำเนินการกับทุกคีย์ที่พิมพ์

$(function(){
    /*
     * this swallows backspace keys on any non-input element.
     * stops backspace -> back
     */
    var rx = /INPUT|SELECT|TEXTAREA/i;

    $(document).bind("keydown keypress", function(e){
        if( e.which == 8 ){ // 8 == backspace
            if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                e.preventDefault();
            }
        }
    });
});

คำตอบอื่น ๆ ที่นี่ได้พิสูจน์แล้วว่าสิ่งนี้ไม่สามารถทำได้หากไม่มีองค์ประกอบที่อนุญาตพิเศษซึ่งอนุญาตให้ใช้ Backspace การแก้ปัญหานี้ไม่เหมาะเนื่องจากรายการที่อนุญาตไม่ตรงไปตรงมาเพียงแค่ textareas และอินพุต / ข้อความ / รหัสผ่าน แต่พบซ้ำ ๆ ว่าไม่สมบูรณ์และจำเป็นต้องได้รับการอัปเดต

อย่างไรก็ตามเนื่องจากวัตถุประสงค์ในการระงับการทำงานของ backspace นั้นเป็นเพียงการป้องกันผู้ใช้จากการสูญเสียข้อมูลโดยไม่ได้ตั้งใจโซลูชั่น beforeunload นั้นดีเนื่องจาก popal modal นั้นน่าประหลาดใจ - ป๊อปอัป modal นั้นไม่ดีเมื่อพวกมันถูกเรียกใช้เป็นส่วนหนึ่งของเวิร์กโฟลว์มาตรฐาน เพราะผู้ใช้จะคุ้นเคยกับการปิดโดยไม่อ่านพวกเขาและพวกเขาก็น่ารำคาญ ในกรณีนี้ป๊อปอัป modal จะปรากฏขึ้นเป็นทางเลือกแทนการกระทำที่หายากและน่าประหลาดใจและดังนั้นจึงเป็นที่ยอมรับ

ปัญหาคือ modal onbeforeunload ต้องไม่ปรากฏขึ้นเมื่อใดก็ตามที่ผู้ใช้นำทางออกจากหน้า (เช่นเมื่อคลิกลิงค์หรือส่งแบบฟอร์ม) และเราไม่ต้องการเริ่มรายการที่อนุญาตพิเศษหรือขึ้นบัญชีดำเงื่อนไขที่เฉพาะเจาะจงก่อนหน้านี้

การผสมผสานที่ลงตัวของการแลกเปลี่ยนสำหรับโซลูชันทั่วไปมีดังนี้: ติดตามว่ามีการกด Backspace หรือไม่และแสดงเฉพาะโมดุลก่อนที่จะโหลดโมดัลถ้าเป็น ในคำอื่น ๆ :

function confirmBackspaceNavigations () {
    // http://stackoverflow.com/a/22949859/2407309
    var backspaceIsPressed = false
    $(document).keydown(function(event){
        if (event.which == 8) {
            backspaceIsPressed = true
        }
    })
    $(document).keyup(function(event){
        if (event.which == 8) {
            backspaceIsPressed = false
        }
    })
    $(window).on('beforeunload', function(){
        if (backspaceIsPressed) {
            backspaceIsPressed = false
            return "Are you sure you want to leave this page?"
        }
    })
} // confirmBackspaceNavigations

สิ่งนี้ได้รับการทดสอบการทำงานใน IE7 +, FireFox, Chrome, Safari และ Opera เพียงวางฟังก์ชั่นนี้ลงใน global.js ของคุณและโทรจากหน้าใดก็ได้ที่คุณไม่ต้องการให้ผู้ใช้สูญเสียข้อมูลโดยไม่ตั้งใจ

โปรดทราบว่าโมดุลที่โหลดก่อนหน้านี้สามารถเรียกใช้เพียงครั้งเดียวดังนั้นหากผู้ใช้กด backspace อีกครั้งโมดัลจะไม่เริ่มทำงานอีก

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

โซลูชันที่หรูหรา / กระชับยิ่งขึ้น:

$(document).on('keydown',function(e){
  var $target = $(e.target||e.srcElement);
  if(e.keyCode == 8 && !$target.is('input,[contenteditable="true"],textarea'))
  {
    e.preventDefault();
  }
})

การแก้ไขคำตอบของ erikkallen เพื่อระบุประเภทอินพุตที่แตกต่างกัน

ฉันพบว่าผู้ใช้ที่กล้าได้กล้าเสียอาจกดแบ็คสเปซบนช่องทำเครื่องหมายหรือปุ่มตัวเลือกในความพยายามอย่างไร้ผลเพื่อล้างข้อมูลและพวกเขาจะกลับไปด้านหลังและสูญเสียข้อมูลทั้งหมด

การเปลี่ยนแปลงนี้ควรแก้ไขปัญหานั้น

ใหม่แก้ไขเพื่อแก้ไข divs เนื้อหาที่แก้ไขได้

    //Prevents backspace except in the case of textareas and text inputs to prevent user navigation.
    $(document).keydown(function (e) {
        var preventKeyPress;
        if (e.keyCode == 8) {
            var d = e.srcElement || e.target;
            switch (d.tagName.toUpperCase()) {
                case 'TEXTAREA':
                    preventKeyPress = d.readOnly || d.disabled;
                    break;
                case 'INPUT':
                    preventKeyPress = d.readOnly || d.disabled ||
                        (d.attributes["type"] && $.inArray(d.attributes["type"].value.toLowerCase(), ["radio", "checkbox", "submit", "button"]) >= 0);
                    break;
                case 'DIV':
                    preventKeyPress = d.readOnly || d.disabled || !(d.attributes["contentEditable"] && d.attributes["contentEditable"].value == "true");
                    break;
                default:
                    preventKeyPress = true;
                    break;
            }
        }
        else
            preventKeyPress = false;

        if (preventKeyPress)
            e.preventDefault();
    });

ตัวอย่าง
การทดสอบทำไฟล์ 2 ไฟล์

starthere.htm - เปิดรายการนี้ก่อนเพื่อให้คุณมีสถานที่ที่จะกลับไป

<a href="./test.htm">Navigate to here to test</a>

test.htm - สิ่งนี้จะนำทางย้อนกลับเมื่อกด Backspace ขณะที่ช่องทำเครื่องหมายหรือส่งมีโฟกัส (ทำได้โดยการแท็บ) แทนที่ด้วยรหัสของฉันเพื่อแก้ไข

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).keydown(function(e) {
        var doPrevent;
        if (e.keyCode == 8) {
            var d = e.srcElement || e.target;
            if (d.tagName.toUpperCase() == 'INPUT' || d.tagName.toUpperCase() == 'TEXTAREA') {
                doPrevent = d.readOnly || d.disabled;
            }
            else
                doPrevent = true;
        }
        else
            doPrevent = false;

        if (doPrevent)
            e.preventDefault();
    });
</script>
</head>
<body>
<input type="text" />
<input type="radio" />
<input type="checkbox" />
<input type="submit" />
</body>
</html>

จากความคิดเห็นปรากฏว่าคุณต้องการหยุดคนสูญเสียข้อมูลในรูปแบบถ้าพวกเขากด backspace เพื่อลบ แต่ฟิลด์ไม่ได้มุ่งเน้น

ในกรณีนี้คุณต้องการดูตัวจัดการเหตุการณ์onunload Stack Overflow ใช้มัน - หากคุณพยายามที่จะออกจากหน้าเมื่อคุณเริ่มเขียนคำตอบมันจะปรากฏขึ้นเตือน

หยุดจากการนำรหัสนี้ไปใช้งานได้!

$(document).on("keydown", function (event) {        
   if (event.keyCode === 8) {
      event.preventDefault();
    }
  });

แต่ไม่ใช่เพื่อ จำกัด ฟิลด์ข้อความ แต่เป็นแบบอื่น

$(document).on("keydown", function (event) {
  if (event.which === 8 && !$(event.target).is("input, textarea")) {
   event.preventDefault();
  }
});

เพื่อป้องกันไม่ให้มันใช้กับฟิลด์เฉพาะ

$('#myOtherField').on("keydown", function (event) {
  if (event.keyCode === 8 || event.which === 8) { 
   event.preventDefault(); 
  } 
});

อ้างถึงอันนี้ด้านล่าง!

ป้องกัน BACKSPACE จากการนำทางกลับด้วย jQuery (เช่นหน้าแรกของ Google)

คำตอบส่วนใหญ่อยู่ใน jquery คุณสามารถทำสิ่งนี้ได้อย่างสมบูรณ์แบบในจาวาสคริปต์ที่บริสุทธิ์เรียบง่ายและไม่จำเป็นต้องใช้ห้องสมุด นี้บทความเป็นจุดที่ดีสำหรับฉัน แต่ตั้งแต่เริ่มต้นkeyIdentifierจะเลิกผมอยากรหัสนี้จะปลอดภัยมากขึ้นดังนั้นฉันเพิ่ม|| e.keyCode == 8ไปถ้ามีคำสั่ง อีกทั้งรหัสนั้นใช้งานไม่ได้กับ Firefox ดังนั้นฉันจึงเพิ่มreturn false และตอนนี้มันทำงานได้อย่างสมบูรณ์แบบดี นี่มันคือ:

<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+0008'||e.keyIdentifier=='Backspace'||e.keyCode==8){if(e.target==document.body){e.preventDefault();return false;}}},true);
</script>

รหัสนี้ใช้งานได้ดีเพราะ

1. มันอยู่ในจาวาสคริปต์ที่บริสุทธิ์ (ไม่จำเป็นต้องใช้ห้องสมุด)
2. ไม่เพียงตรวจสอบการกดปุ่มมันยืนยันว่าการกระทำนั้นเป็นการกระทำที่เบราว์เซอร์ "ย้อนกลับ" จริงหรือไม่
3. เมื่อใช้ร่วมกับผู้ใช้ข้างต้นผู้ใช้สามารถพิมพ์และลบข้อความจากกล่องข้อความเข้าบนหน้าเว็บได้โดยไม่มีปัญหาใด ๆ ในขณะที่ยังคงป้องกันการทำงานของปุ่มย้อนกลับ
4. มันสั้นสะอาดเร็วและตรงประเด็น

คุณสามารถเพิ่ม console.log (e); สำหรับจุดประสงค์ในการทดสอบของคุณและกด F12 ในโครเมี่ยมไปที่แท็บ "คอนโซล" และกด "backspace" บนหน้าและดูข้างในเพื่อดูว่ามีการคืนค่าใดจากนั้นคุณสามารถกำหนดเป้าหมายพารามิเตอร์เหล่านั้นทั้งหมดเพื่อปรับปรุงรหัสเพิ่มเติม ด้านบนเพื่อให้เหมาะกับความต้องการของคุณ

การรวมโซลูชันที่กำหนดโดย "thetoolman" && "Biff MaGriff"

รหัสต่อไปนี้ดูเหมือนว่าจะทำงานอย่างถูกต้องใน IE 8 / Mozilla / Chrome

$(function () {
    var rx = /INPUT|TEXTAREA/i;
    var rxT = /RADIO|CHECKBOX|SUBMIT/i;

    $(document).bind("keydown keypress", function (e) {
        var preventKeyPress;
        if (e.keyCode == 8) {
            var d = e.srcElement || e.target;
            if (rx.test(e.target.tagName)) {
                var preventPressBasedOnType = false;
                if (d.attributes["type"]) {
                    preventPressBasedOnType = rxT.test(d.attributes["type"].value);
                }
                preventKeyPress = d.readOnly || d.disabled || preventPressBasedOnType;
            } else {preventKeyPress = true;}
        } else { preventKeyPress = false; }

        if (preventKeyPress) e.preventDefault();
    });
}); 

ไม่แน่ใจว่าทำไมไม่มีใครตอบคำถามนี้ดูเหมือนว่าเป็นคำถามทางเทคนิคที่สมเหตุสมผลพอสมควรที่จะถามว่าเป็นไปได้หรือไม่

ไม่ฉันไม่คิดว่าจะมีวิธีข้ามเบราว์เซอร์ในการปิดใช้งานปุ่ม Backspace ฉันรู้ว่ามันไม่ได้เปิดใช้งานโดยค่าเริ่มต้นใน FF วันนี้แม้ว่า

วิธีนี้คล้ายกับโซลูชันอื่น ๆ ที่โพสต์ แต่ใช้บัญชีขาวธรรมดาทำให้ปรับแต่งได้ง่ายเพื่ออนุญาตให้ backspace ในองค์ประกอบที่ระบุเพียงแค่ตั้งค่าตัวเลือกในฟังก์ชัน. is ()

ฉันใช้ในรูปแบบนี้เพื่อป้องกัน backspace บนหน้าเว็บจากการนำทางกลับ:

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input:not([readonly]), textarea")) {
        e.preventDefault();
    }
});

หากต้องการอธิบายรายละเอียดคำตอบที่ยอดเยี่ยมของ @ erikkallen เล็กน้อยต่อไปนี้เป็นฟังก์ชั่นที่ช่วยให้ป้อนข้อมูลด้วยคีย์บอร์ดทุกชนิดรวมถึงที่แนะนำใน HTML5 :

$(document).unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;
    var INPUTTYPES = [
        "text", "password", "file", "date", "datetime", "datetime-local",
        "month", "week", "time", "email", "number", "range", "search", "tel",
        "url"];
    var TEXTRE = new RegExp("^" + INPUTTYPES.join("|") + "$", "i");
    if (event.keyCode === 8) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && d.type.match(TEXTRE)) ||
             d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        } else {
            doPrevent = true;
        }
    }
    if (doPrevent) {
        event.preventDefault();
    }
});

JavaScript - วิธี jQuery:

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input, textarea")) {
        e.preventDefault();
    }
});

Javascript - วิธีดั้งเดิมที่เหมาะกับฉัน:

<script type="text/javascript">

//on backspace down + optional callback
function onBackspace(e, callback){
    var key;
    if(typeof e.keyIdentifier !== "undefined"){
        key = e.keyIdentifier;

    }else if(typeof e.keyCode !== "undefined"){
        key = e.keyCode;
    }
    if (key === 'U+0008' || 
        key === 'Backspace' || 
        key === 8) {
                    if(typeof callback === "function"){
                callback();
            }
            return true;
        }
    return false;
}

//event listener
window.addEventListener('keydown', function (e) {

    switch(e.target.tagName.toLowerCase()){
        case "input":
        case "textarea":
        break;
        case "body":
            onBackspace(e,function(){
                e.preventDefault();
            });

        break;
    }
}, true);
</script>

ฉันมีปัญหาในการหาคำตอบที่ไม่ใช่ JQUERY ขอบคุณ Stas ที่ให้ฉันตามรอย

โครเมียม: หากคุณไม่ต้องการการสนับสนุนข้ามเบราว์เซอร์คุณสามารถใช้บัญชีดำแทนบัญชีขาว รุ่น JS บริสุทธิ์นี้ใช้งานได้ใน Chrome แต่ไม่ใช่ใน IE ไม่แน่ใจเกี่ยวกับ FF

ใน Chrome (Ver. 36, 2014 กลาง) keypresses ไม่ได้อยู่ในการป้อนข้อมูลหรือองค์ประกอบ contenteditable <BODY>ดูเหมือนจะกำหนดเป้าหมายไปยัง สิ่งนี้ทำให้สามารถใช้บัญชีดำซึ่งฉันต้องการยกเว้นรายการที่อนุญาต IE ใช้เป้าหมายคลิกสุดท้าย - ดังนั้นอาจเป็น div หรืออย่างอื่น สิ่งนี้ทำให้ไร้ประโยชน์ใน IE

window.onkeydown = function(event) {
    if (event.keyCode == 8) {
    //alert(event.target.tagName); //if you want to see how chrome handles keypresses not on an editable element
        if (event.target.tagName == 'BODY') {
            //alert("Prevented Navigation");
            event.preventDefault();
        }
    }
}  

Cross Browser: สำหรับจาวาสคริปต์ที่บริสุทธิ์ฉันพบว่าคำตอบของ Stas นั้นดีที่สุด การเพิ่มการตรวจสอบเงื่อนไขอีกหนึ่งรายการสำหรับ contenteditable ทำให้ฉันใช้งานได้ *:

document.onkeydown = function(e) {stopDefaultBackspaceBehaviour(e);}
document.onkeypress = function(e) {stopDefaultBackspaceBehaviour(e);}

function stopDefaultBackspaceBehaviour(event) {
    var event = event || window.event;
    if (event.keyCode == 8) {
        var elements = "HTML, BODY, TABLE, TBODY, TR, TD, DIV";
        var d = event.srcElement || event.target;
        var regex = new RegExp(d.tagName.toUpperCase());
        if (d.contentEditable != 'true') { //it's not REALLY true, checking the boolean value (!== true) always passes, so we can use != 'true' rather than !== true/
            if (regex.test(elements)) {
                event.preventDefault ? event.preventDefault() : event.returnValue = false;
            }
        }
    }
}

* โปรดทราบว่า IEs [แก้ไข: และ Spartan / TechPreview] มี "คุณสมบัติ" ที่ทำให้องค์ประกอบที่เกี่ยวข้องกับตารางไม่สามารถแก้ไขได้ หากคุณคลิกที่หนึ่งแล้วกด backspace มันจะนำทางกลับ หากคุณไม่มี<td>s ที่แก้ไขได้นี่ไม่ใช่ปัญหา

ฉันมีปัญหาบางอย่างกับวิธีแก้ปัญหาที่ยอมรับและปลั๊กอิน Select2.js ฉันไม่สามารถลบตัวอักษรในช่องที่สามารถแก้ไขได้เนื่องจากมีการป้องกันการลบ นี่คือทางออกของฉัน:

//Prevent backwards navigation when trying to delete disabled text.
$(document).unbind('keydown').bind('keydown', function (event) {

    if (event.keyCode === 8) {

        var doPrevent = false,
            d = event.srcElement || event.target,
            tagName = d.tagName.toUpperCase(),
            type = (d.type ? d.type.toUpperCase() : ""),
            isEditable = d.contentEditable,
            isReadOnly = d.readOnly,
            isDisabled = d.disabled;

        if (( tagName === 'INPUT' && (type === 'TEXT' || type === 'PASSWORD'))
            || tagName === 'PASSWORD'
            || tagName === 'TEXTAREA') {
            doPrevent =  isReadOnly || isDisabled;
        }
        else if(tagName === 'SPAN'){
            doPrevent = !isEditable;
        }
        else {
            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
    }
});

Select2 สร้าง Span ด้วยแอททริบิวต์ของ "contentEditable" ซึ่งตั้งค่าเป็นจริงสำหรับกล่องคอมโบที่สามารถแก้ไขได้ ฉันเพิ่มรหัสไปยังบัญชีสำหรับช่วง tagName และคุณลักษณะที่แตกต่างกัน สิ่งนี้แก้ไขปัญหาทั้งหมดของฉันได้

แก้ไข: หากคุณไม่ได้ใช้ปลั๊กอิน Select2 combobox สำหรับ jquery แสดงว่าคุณอาจไม่ต้องการโซลูชันนี้และโซลูชันที่ยอมรับอาจดีกว่า

    document.onkeydown = function (e) {    
        e.stopPropagation();
        if ((e.keyCode==8  ||  e.keyCode==13) &&
            (e.target.tagName != "TEXTAREA") && 
            (e.target.tagName != "INPUT")) { 
            return false;
        }
    };

รหัสนี้แก้ปัญหาในเบราว์เซอร์ทั้งหมด:

onKeydown:function(e)
{
    if (e.keyCode == 8) 
    {
      var d = e.srcElement || e.target;
      if (!((d.tagName.toUpperCase() == 'BODY') || (d.tagName.toUpperCase() == 'HTML'))) 
      {
         doPrevent = false;
      }
       else
      {
         doPrevent = true;
      }
    }
    else
    {
       doPrevent = false;
    }
      if (doPrevent)
      {
         e.preventDefault();
       }

  }

วิธีที่ง่ายที่สุดในการป้องกันการนำทางในการกด backspace

$(document).keydown(function () {
    if (event.keyCode == 8) {
        if (event.target.nodeName == 'BODY') {
            event.preventDefault();
        }
    }
});

การใช้ชุดเครื่องมือ Dojo 1.7 ทำงานได้ใน IE 8:

require(["dojo/on", "dojo/keys", "dojo/domReady!"],
function(on, keys) {
    on(document.body,"keydown",function(evt){if(evt.keyCode == keys.BACKSPACE)evt.preventDefault()});
});

คุณลองใช้วิธีง่าย ๆ เพียงแค่เพิ่มคุณลักษณะต่อไปนี้ในฟิลด์ข้อความแบบอ่านอย่างเดียวของคุณ:

onkeydown = "return false;"

นี่จะเป็นการป้องกันไม่ให้เบราว์เซอร์ย้อนกลับไปในประวัติศาสตร์เมื่อกดปุ่ม Backspace ในช่องข้อความแบบอ่านอย่างเดียว บางทีฉันอาจขาดความตั้งใจที่แท้จริงของคุณไป แต่ดูเหมือนว่านี่จะเป็นวิธีที่ง่ายที่สุดในการแก้ไขปัญหาของคุณ

ทางออกที่ดีมาก -

$(document).on('keydown', function (e) {
    var key = e == null ? event.keyCode : e.keyCode;
    if(key == 8 && $(document.activeElement.is(':not(:input)')))   //select, textarea
      e.preventDefault();
});

อีกวิธีหนึ่งคุณสามารถตรวจสอบว่า

$(document.activeElement).is('body')

เพียวจาวาสคริปต์รุ่นซึ่งใช้งานได้ในเบราว์เซอร์ทั้งหมด:

document.onkeydown = function(e) {stopDefaultBackspaceBehaviour(e);}
document.onkeypress = function(e) {stopDefaultBackspaceBehaviour(e);}

function stopDefaultBackspaceBehaviour(event) {
  var event = event || window.event;
  if (event.keyCode == 8) {
    var elements = "HTML, BODY, TABLE, TBODY, TR, TD, DIV";
    var d = event.srcElement || event.target;
    var regex = new RegExp(d.tagName.toUpperCase());
    if (regex.test(elements)) {
      event.preventDefault ? event.preventDefault() : event.returnValue = false;
    }
  }
}

แน่นอนคุณสามารถใช้ "INPUT, TEXTAREA" และใช้ "if (! regex.test (องค์ประกอบ))" จากนั้น ครั้งแรกที่ทำงานได้ดีสำหรับฉัน

ประสิทธิภาพ?

ฉันกังวลเกี่ยวกับการแสดงและทำซอ: http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/

var stresstest = function(e, method, index){...

ฉันได้วิเคราะห์วิธีที่มีแนวโน้มมากที่สุดที่ฉันพบในหัวข้อนี้ ปรากฎว่าพวกเขาทั้งหมดเร็วมากและส่วนใหญ่อาจไม่ทำให้เกิดปัญหาในแง่ของ "ความเฉื่อยชา" เมื่อพิมพ์ วิธีที่ช้าที่สุดที่ฉันดูคือประมาณ 125 ms สำหรับ 10.000 calls ใน IE8 ซึ่งคือ 0.0125ms ต่อ Stroke

ฉันพบวิธีการโพสต์โดย Codenepal และ Robin Maben ให้เร็วที่สุด ~ 0.001ms (IE8) แต่ระวังความหมายที่แตกต่างกัน

บางทีนี่อาจเป็นการช่วยบรรเทาความเดือดร้อนให้กับคนที่แนะนำการทำงานประเภทนี้ให้กับรหัสของเขา

แก้ไขคำตอบของ erikkallen:

$(document).unbind('keydown').bind('keydown', function (event) {

    var doPrevent = false, elem;

    if (event.keyCode === 8) {
        elem = event.srcElement || event.target;
        if( $(elem).is(':input') ) {
            doPrevent = elem.readOnly || elem.disabled;
        } else {
            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
        return false;
    }
});

วิธีนี้ใช้ได้ดีมากเมื่อทดสอบ

ฉันเพิ่มรหัสบางอย่างเพื่อจัดการกับช่องป้อนข้อมูลที่ไม่ได้ติดแท็กด้วยอินพุตและรวมเข้ากับแอปพลิเคชัน Oracle PL / SQL ที่สร้างแบบฟอร์มป้อนข้อมูลสำหรับงานของฉัน

"สองเซ็นต์" ของฉัน:

 if (typeof window.event != ''undefined'')
    document.onkeydown = function() {
    //////////// IE //////////////
    var src = event.srcElement;
    var tag = src.tagName.toUpperCase();
    if (event.srcElement.tagName.toUpperCase() != "INPUT"
        && event.srcElement.tagName.toUpperCase() != "TEXTAREA"
        || src.readOnly || src.disabled 
        )
        return (event.keyCode != 8);
    if(src.type) {
       var type = ("" + src.type).toUpperCase();
       return type != "CHECKBOX" && type != "RADIO" && type != "BUTTON";
       }
   }
else
   document.onkeypress = function(e) {
   //////////// FireFox 
   var src = e.target;
   var tag = src.tagName.toUpperCase();
   if ( src.nodeName.toUpperCase() != "INPUT" && tag != "TEXTAREA"
      || src.readOnly || src.disabled )
      return (e.keyCode != 8);
    if(src.type) {
      var type = ("" + src.type).toUpperCase();
      return type != "CHECKBOX" && type != "RADIO" && type != "BUTTON";
      }                              
   }

ฉันสร้างโครงการ NPM ด้วยเวอร์ชันใหม่ทั้งหมดที่เป็นที่ยอมรับในปัจจุบัน (ของ erikkallen)

https://github.com/slorber/backspace-disabler

มันใช้หลักการเดียวกันโดยทั่วไป แต่:

• ไม่มีการพึ่งพา
• รองรับ contenteditable
• ฐานรหัสที่อ่าน / บำรุงรักษาได้มากกว่า
• จะได้รับการสนับสนุนตามที่จะใช้ในการผลิตโดย บริษัท ของฉัน
• ใบอนุญาต MIT

var Backspace = 8;

// See http://stackoverflow.com/questions/12949590/how-to-detach-event-in-ie-6-7-8-9-using-javascript
function addHandler(element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
    } else {
        element["on" + type] = handler;
    }
}
function removeHandler(element, type, handler) {
    if (element.removeEventListener) {
        element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
        element.detachEvent("on" + type, handler);
    } else {
        element["on" + type] = null;
    }
}




// Test wether or not the given node is an active contenteditable,
// or is inside an active contenteditable
function isInActiveContentEditable(node) {
    while (node) {
        if ( node.getAttribute && node.getAttribute("contenteditable") === "true" ) {
            return true;
        }
        node = node.parentNode;
    }
    return false;
}



var ValidInputTypes = ['TEXT','PASSWORD','FILE','EMAIL','SEARCH','DATE'];

function isActiveFormItem(node) {
    var tagName = node.tagName.toUpperCase();
    var isInput = ( tagName === "INPUT" && ValidInputTypes.indexOf(node.type.toUpperCase()) >= 0 );
    var isTextarea = ( tagName === "TEXTAREA" );
    if ( isInput || isTextarea ) {
        var isDisabled = node.readOnly || node.disabled;
        return !isDisabled;
    }
    else if ( isInActiveContentEditable(node) ) {
        return true;
    }
    else {
        return false;
    }
}


// See http://stackoverflow.com/questions/1495219/how-can-i-prevent-the-backspace-key-from-navigating-back
function disabler(event) {
    if (event.keyCode === Backspace) {
        var node = event.srcElement || event.target;
        // We don't want to disable the ability to delete content in form inputs and contenteditables
        if ( isActiveFormItem(node) ) {
            // Do nothing
        }
        // But in any other cases we prevent the default behavior that triggers a browser backward navigation
        else {
            event.preventDefault();
        }
    }
}


/**
 * By default the browser issues a back nav when the focus is not on a form input / textarea
 * But users often press back without focus, and they loose all their form data :(
 *
 * Use this if you want the backspace to never trigger a browser back
 */
exports.disable = function(el) {
    addHandler(el || document,"keydown",disabler);
};

/**
 * Reenable the browser backs
 */
exports.enable = function(el) {
    removeHandler(el || document,"keydown",disabler);
};

นี่คือการเขียนคำตอบที่ได้รับคะแนนสูงสุดของฉัน ฉันพยายามตรวจสอบ element.value! == undefined (เนื่องจากองค์ประกอบบางอย่างเช่นอาจไม่มีแอตทริบิวต์ html แต่อาจมีคุณสมบัติค่าจาวาสคริปต์ที่อื่นในห่วงโซ่ต้นแบบ) แต่มันก็ใช้งานไม่ได้ดีและมีกรณีขอบจำนวนมาก ดูเหมือนจะไม่มีวิธีที่ดีในการพิสูจน์สิ่งนี้ในอนาคตดังนั้นบัญชีขาวดูเหมือนจะเป็นตัวเลือกที่ดีที่สุด

สิ่งนี้จะลงทะเบียนองค์ประกอบที่ส่วนท้ายของระยะเหตุการณ์ฟองสบู่ดังนั้นหากคุณต้องการจัดการ Backspace ด้วยวิธีการที่กำหนดเองคุณสามารถทำได้ในตัวจัดการอื่น ๆ

นอกจากนี้ยังตรวจสอบอินสแตนซ์ของ HTMLTextAreElement เนื่องจากในทางทฤษฎีอาจมีองค์ประกอบของเว็บซึ่งสืบทอดมาจากสิ่งนั้น

สิ่งนี้ไม่ได้ตรวจสอบ contentEditable (รวมกับคำตอบอื่น ๆ )

https://jsfiddle.net/af2cfjc5/15/

var _INPUTTYPE_WHITELIST = ['text', 'password', 'search', 'email', 'number', 'date'];

function backspaceWouldBeOkay(elem) {
    // returns true if backspace is captured by the element
    var isFrozen = elem.readOnly || elem.disabled;
    if (isFrozen) // a frozen field has no default which would shadow the shitty one
        return false;
    else {
        var tagName = elem.tagName.toLowerCase();
        if (elem instanceof HTMLTextAreaElement) // allow textareas
            return true;
        if (tagName=='input') { // allow only whitelisted input types
            var inputType = elem.type.toLowerCase();
            if (_INPUTTYPE_WHITELIST.includes(inputType))
                return true;
        }   
        return false; // everything else is bad
    }
}

document.body.addEventListener('keydown', ev => {
    if (ev.keyCode==8 && !backspaceWouldBeOkay(ev.target)) {
        //console.log('preventing backspace navigation');
        ev.preventDefault();
    }
}, true); // end of event bubble phase

Sitepoint: ปิดการใช้งาน Javascript

event.stopPropagation()และevent.preventDefault()ไม่ทำอะไรเลยใน IE ฉันต้องส่งคืนevent.keyCode == 11(ฉันเพิ่งเลือกบางอย่าง) แทนที่จะพูด"if not = 8, run the event"เพื่อให้มันใช้งานได้ event.returnValue = falseยังใช้งานได้

วิธีการอื่นที่ใช้ jquery

    <script type="text/javascript">

    //set this variable according to the need within the page
    var BACKSPACE_NAV_DISABLED = true;

    function fnPreventBackspace(event){if (BACKSPACE_NAV_DISABLED && event.keyCode == 8) {return false;}}
    function fnPreventBackspacePropagation(event){if(BACKSPACE_NAV_DISABLED && event.keyCode == 8){event.stopPropagation();}return true;}

    $(document).ready(function(){ 
        if(BACKSPACE_NAV_DISABLED){
            //for IE use keydown, for Mozilla keypress  
            //as described in scr: http://www.codeproject.com/KB/scripting/PreventDropdownBackSpace.aspx
            $(document).keypress(fnPreventBackspace);
            $(document).keydown(fnPreventBackspace);

            //Allow Backspace is the following controls 
            var jCtrl = null;
            jCtrl = $('input[type="text"]');
            jCtrl.keypress(fnPreventBackspacePropagation);
            jCtrl.keydown(fnPreventBackspacePropagation);

            jCtrl = $('input[type="password"]');
            jCtrl.keypress(fnPreventBackspacePropagation);
            jCtrl.keydown(fnPreventBackspacePropagation);

            jCtrl = $('textarea');
            jCtrl.keypress(fnPreventBackspacePropagation);
            jCtrl.keydown(fnPreventBackspacePropagation);

            //disable backspace for readonly and disabled
            jCtrl = $('input[type="text"][readonly="readonly"]')
            jCtrl.keypress(fnPreventBackspace);
            jCtrl.keydown(fnPreventBackspace);

            jCtrl = $('input[type="text"][disabled="disabled"]')
            jCtrl.keypress(fnPreventBackspace);
            jCtrl.keydown(fnPreventBackspace);
        }
    }); 

    </script>

ฉันใช้รหัสนี้ในบางเวลา ฉันเขียนการทดสอบออนไลน์สำหรับนักเรียนและพบปัญหาเมื่อนักเรียนกด backspace ระหว่างการทดสอบและจะนำพวกเขากลับไปที่หน้าจอเข้าสู่ระบบ ผิดหวัง! มันทำงานบน FF แน่นอน

document.onkeypress = Backspace;
function Backspace(event) {
    if (event.keyCode == 8) {
        if (document.activeElement.tagName == "INPUT") {
            return true;
        } else {
            return false;
        }
    }
}