Làm cách nào tôi có thể ngăn phím backspace điều hướng trở lại?

Trên IE tôi có thể làm điều này với jQuery (cực kỳ không chuẩn, nhưng đang hoạt động)

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

Nhưng liệu có thể thực hiện theo cách hoạt động trên Firefox hoặc theo cách đa trình duyệt để nhận tiền thưởng?

Đối với hồ sơ:

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

Không lam gi cả.

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

giải quyết vấn đề, nhưng khiến cho phím backspace không thể sử dụng được trên trang, thậm chí còn tệ hơn hành vi ban đầu.

EDIT: Lý do tôi làm điều này là vì tôi không tạo ra một trang web đơn giản mà là một ứng dụng lớn. Thật khó chịu khi mất 10 phút làm việc chỉ vì bạn nhấn backspace không đúng chỗ. Tỷ lệ ngăn ngừa lỗi so với người dùng gây phiền nhiễu nên vượt quá 1000/1 bằng cách ngăn phím backspace điều hướng trở lại.

EDIT2: Tôi không cố gắng ngăn điều hướng lịch sử, chỉ là tai nạn.

EDIT3: Nhận xét @brentonstrines (được chuyển đến đây vì câu hỏi rất phổ biến): Đây là một 'sửa chữa' dài hạn, nhưng bạn có thể ném hỗ trợ của mình đằng sau lỗi Chromium để thay đổi hành vi này trong webkit

Mã này giải quyết vấn đề, ít nhất là trong IE và Firefox (chưa thử nghiệm bất kỳ vấn đề nào khác, nhưng tôi cho nó cơ hội làm việc hợp lý nếu sự cố thậm chí còn tồn tại trong các trình duyệt khác).

// 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;
        }
    }
});

Mã này hoạt động trên tất cả các trình duyệt và nuốt phím backspace khi không phải trên một phần tử biểu mẫu hoặc nếu phần tử biểu mẫu bị vô hiệu hóa | readOnly. Nó cũng hiệu quả, điều này rất quan trọng khi nó được thực thi trên mọi khóa được nhập vào.

$(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();
            }
        }
    });
});

Các câu trả lời khác ở đây đã xác định rằng điều này không thể được thực hiện mà không có các yếu tố trong danh sách trắng trong đó Backspace được cho phép. Giải pháp này không lý tưởng vì danh sách trắng không đơn giản như chỉ đơn thuần là nhập văn bản và nhập văn bản / mật khẩu, nhưng nhiều lần được tìm thấy là không đầy đủ và cần phải cập nhật.

Tuy nhiên, vì mục đích ngăn chặn chức năng backspace chỉ đơn thuần là để ngăn người dùng vô tình làm mất dữ liệu, giải pháp trước khi tải là một giải pháp tốt vì cửa sổ bật lên phương thức rất đáng ngạc nhiên - cửa sổ bật lên phương thức rất tệ khi chúng được kích hoạt như một phần của quy trình làm việc tiêu chuẩn, bởi vì người dùng đã quen với việc loại bỏ chúng mà không đọc chúng, và chúng gây phiền nhiễu. Trong trường hợp này, cửa sổ bật lên phương thức sẽ chỉ xuất hiện thay thế cho một hành động hiếm gặp và đáng ngạc nhiên, và do đó được chấp nhận.

Vấn đề là một chế độ onb Beforeunload không được bật lên bất cứ khi nào người dùng điều hướng khỏi trang (chẳng hạn như khi nhấp vào liên kết hoặc gửi biểu mẫu) và chúng tôi không muốn bắt đầu danh sách trắng hoặc liệt kê các điều kiện onb Beforeunload cụ thể.

Sự kết hợp lý tưởng của sự đánh đổi cho một giải pháp tổng quát như sau: theo dõi xem liệu backspace có được nhấn hay không và chỉ bật lên phương thức onb Beforeunload nếu có. Nói cách khác:

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

Điều này đã được thử nghiệm để hoạt động trong IE7 +, FireFox, Chrome, Safari và Opera. Chỉ cần thả chức năng này vào global.js của bạn và gọi nó từ bất kỳ trang nào mà bạn không muốn người dùng vô tình làm mất dữ liệu của họ.

Lưu ý rằng một chế độ onb Beforeunload chỉ có thể được kích hoạt một lần, vì vậy nếu người dùng nhấn lại backspace, phương thức sẽ không kích hoạt lại.

Lưu ý rằng điều này sẽ không kích hoạt các sự kiện băm, tuy nhiên trong bối cảnh đó, bạn có thể sử dụng các kỹ thuật khác để ngăn người dùng vô tình làm mất dữ liệu của họ.

Một giải pháp thanh lịch / súc tích hơn:

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

Sửa đổi câu trả lời của erikkallen để giải quyết các loại đầu vào khác nhau

Tôi đã phát hiện ra rằng một người dùng dám nghĩ dám làm có thể nhấn backspace trên hộp kiểm hoặc nút radio trong một nỗ lực vô ích để xóa nó và thay vào đó họ sẽ điều hướng lùi và mất tất cả dữ liệu của họ.

Thay đổi này sẽ giải quyết vấn đề đó.

Chỉnh sửa mới để giải quyết nội dung div có thể chỉnh sửa

    //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();
    });

Ví dụ
Để kiểm tra làm 2 tệp.

starthere.htm - mở cái này trước để bạn có một nơi để quay lại

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

test.htm - Điều này sẽ điều hướng lùi khi nhấn phím lùi trong khi hộp kiểm hoặc gửi có tiêu điểm (đạt được bằng cách gắn thẻ). Thay thế bằng mã của tôi để sửa chữa.

<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>

Dựa trên các bình luận, có vẻ như bạn muốn ngăn mọi người mất thông tin trong các biểu mẫu, nếu họ nhấn backspace để xóa nhưng trường không được tập trung.

Trong trường hợp đó, bạn muốn xem xét xử lý sự kiện onunload . Stack Overflow sử dụng nó - nếu bạn cố gắng rời khỏi một trang khi bạn bắt đầu viết câu trả lời, nó sẽ hiện ra một cảnh báo.

Dừng điều hướng mã này hoạt động!

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

Nhưng để không hạn chế các trường văn bản nhưng những người khác

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

Để ngăn chặn nó cho lĩnh vực cụ thể chỉ cần sử dụng

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

Nhắc đến cái này dưới đây!

Ngăn BACKSPACE điều hướng trở lại với jQuery (Giống như Trang chủ của Google)

Hầu hết các câu trả lời là trong jquery. Bạn có thể làm điều này một cách hoàn hảo trong Javascript thuần túy, đơn giản và không cần thư viện. Bài viết này là một điểm khởi đầu tốt cho tôi nhưng vì keyIdentifier không được dùng nữa, tôi muốn mã này an toàn hơn nên tôi đã thêm || e.keyCode == 8 vào câu lệnh if. Ngoài ra, mã không hoạt động tốt trên Firefox nên tôi đã thêm return false; và bây giờ nó hoạt động hoàn toàn tốt. Đây là:

<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>

Mã này hoạt động tuyệt vời bởi vì,

1. Nó là trong javascript thuần túy (không cần thư viện).
2. Không chỉ kiểm tra phím được nhấn, nó còn xác nhận xem hành động đó có thực sự là hành động "quay lại" của trình duyệt hay không.
3. Cùng với cách trên, người dùng có thể nhập và xóa văn bản khỏi các hộp văn bản đầu vào trên trang web mà không gặp bất kỳ vấn đề nào trong khi vẫn ngăn chặn hành động của nút quay lại.
4. Nó ngắn, sạch sẽ, nhanh chóng và đi thẳng vào vấn đề.

Bạn có thể thêm console.log (e); cho mục đích thử nghiệm của bạn và nhấn F12 bằng chrome, hãy chuyển đến tab "console" và nhấn "backspace" trên trang và nhìn vào bên trong để xem giá trị nào được trả về, sau đó bạn có thể nhắm mục tiêu tất cả các tham số đó để tăng cường hơn nữa mã ở trên để phù hợp với nhu cầu của bạn.

Kết hợp các giải pháp được đưa ra bởi "thetoolman" && "Biff MaGriff"

mã sau dường như hoạt động chính xác trong 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();
    });
}); 

Không chắc chắn tại sao không ai chỉ trả lời điều này - có vẻ như là một câu hỏi kỹ thuật hoàn toàn hợp lý để hỏi liệu điều đó có khả thi hay không.

Không, tôi không nghĩ có một cách trình duyệt chéo để tắt nút backspace. Tôi biết mặc dù nó không được bật trong FF ngày nay.

Giải pháp này tương tự như các giải pháp khác đã được đăng, nhưng nó sử dụng danh sách trắng đơn giản giúp dễ dàng tùy chỉnh để cho phép backspace trong các thành phần được chỉ định chỉ bằng cách đặt bộ chọn trong hàm .is ().

Tôi sử dụng nó trong hình thức này để ngăn chặn backspace trên các trang điều hướng trở lại:

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

Để giải thích một chút về câu trả lời xuất sắc của @ erikkallen , đây là một chức năng cho phép tất cả các loại đầu vào dựa trên bàn phím, bao gồm cả các loại được giới thiệu trong 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 - Cách jQuery:

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

Javascript - cách bản địa, phù hợp với tôi:

<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>

Tôi đã có một thời gian khó khăn để tìm một câu trả lời không JQUERY. Cảm ơn Stas đã đưa tôi vào đường đua.

Trình duyệt Chrome: Nếu bạn không cần hỗ trợ trình duyệt chéo, bạn chỉ có thể sử dụng danh sách đen, thay vì danh sách trắng. Phiên bản JS thuần này hoạt động trong Chrome, nhưng không phải trong IE. Không chắc chắn về FF.

Trong Chrome (câu 36, giữa năm 2014), các phím bấm không nằm trên yếu tố đầu vào hoặc nội dung có thể được nhắm mục tiêu <BODY>. Điều này làm cho nó có thể sử dụng một danh sách đen, mà tôi thích vào danh sách trắng. IE sử dụng mục tiêu nhấp chuột cuối cùng - vì vậy nó có thể là div hoặc bất cứ thứ gì khác. Điều đó làm cho điều này trở nên vô dụng trong 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();
        }
    }
}  

Trình duyệt chéo: Đối với javascript thuần túy, tôi thấy câu trả lời của Stas là tốt nhất. Thêm một kiểm tra điều kiện nữa cho nội dung có thể làm cho nó hoạt động đối với tôi *:

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;
            }
        }
    }
}

* Lưu ý rằng IE [chỉnh sửa: và Spartan / TechPreview] có "tính năng" làm cho các thành phần liên quan đến bảng không thể được chỉnh sửa . Nếu bạn nhấp vào một trong số đó và nhấn phím lùi, nó sẽ điều hướng trở lại. Nếu bạn không có <td>s có thể chỉnh sửa , đây không phải là vấn đề.

Tôi đã gặp một số vấn đề với giải pháp được chấp nhận và plugin Chọn2.js; Tôi không thể xóa các ký tự trong hộp có thể chỉnh sửa vì hành động xóa đang bị ngăn chặn. Đây là giải pháp của tôi:

//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 tạo Span với thuộc tính "contentEditable" được đặt thành true cho hộp tổ hợp có thể chỉnh sửa trong đó. Tôi đã thêm mã vào tài khoản cho tagName và thuộc tính khác nhau. Điều này giải quyết tất cả các vấn đề của tôi.

Chỉnh sửa: Nếu bạn không sử dụng plugin Combo2 cho jquery, thì giải pháp này có thể không cần thiết cho bạn và giải pháp được chấp nhận có thể tốt hơn.

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

Mã này giải quyết vấn đề trong tất cả các trình duyệt:

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();
       }

  }

Cách đơn giản nhất để ngăn điều hướng khi nhấn backspace

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

Sử dụng bộ công cụ Dojo 1.7, công cụ này hoạt động trong 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()});
});

Bạn đã thử giải pháp rất đơn giản chỉ cần thêm thuộc tính sau vào trường văn bản chỉ đọc của bạn:

onkeydown = "trả về sai;"

Điều này sẽ giữ cho trình duyệt không quay trở lại trong lịch sử khi nhấn phím Backspace trong trường văn bản chỉ đọc. Có thể tôi đang thiếu ý định thực sự của bạn, nhưng có vẻ như đây sẽ là giải pháp đơn giản nhất cho vấn đề của bạn.

Một giải pháp gọn gàng hơn -

$(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();
});

Thay phiên, bạn chỉ có thể kiểm tra nếu

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

Phiên bản javascript thuần, hoạt động trong tất cả các trình duyệt:

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;
    }
  }
}

Tất nhiên, bạn có thể sử dụng "INPUT, TEXTAREA" và sử dụng "if (! Regex.test (yếu tố))". Việc đầu tiên làm việc tốt cho tôi.

Hiệu suất?

Tôi đã lo lắng về hiệu suất và thực hiện một câu đố: http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/

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

Tôi đã phân tích các phương pháp hứa hẹn nhất tôi tìm thấy trong chủ đề này. Hóa ra, tất cả chúng đều rất nhanh và hầu hết có thể không gây ra vấn đề gì về "sự chậm chạp" khi gõ. Phương pháp chậm nhất tôi đã xem là khoảng 125 ms cho 10.000 cuộc gọi trong IE8. Đó là 0,0125ms mỗi Đột quỵ.

Tôi thấy các phương thức được đăng bởi Codenepal và Robin Maben là nhanh nhất ~ 0,001ms (IE8) nhưng hãy cẩn thận với các ngữ nghĩa khác nhau.

Có lẽ đây là một sự giải thoát cho ai đó giới thiệu loại chức năng này cho mã của mình.

Câu trả lời erikkallen đã sửa đổi:

$(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;
    }
});

Giải pháp này hoạt động rất tốt khi thử nghiệm.

Tôi đã thêm một số mã để xử lý một số trường đầu vào không được gắn thẻ đầu vào và để tích hợp trong ứng dụng Oracle PL / SQL tạo biểu mẫu đầu vào cho công việc của tôi.

Theo quan điểm của tôi":

 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";
      }                              
   }

Tôi đã tạo một dự án NPM với phiên bản sạch của hiện đang được chấp nhận (của erikkallen)

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

Về cơ bản, nó sử dụng các nguyên tắc tương tự nhưng:

• Không phụ thuộc
• Hỗ trợ cho nội dung
• Cơ sở mã dễ đọc / duy trì hơn
• Sẽ được hỗ trợ vì nó sẽ được sử dụng trong sản xuất bởi công ty của tôi
• Giấy phép 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);
};

Dưới đây là bài viết lại của tôi về câu trả lời được bình chọn hàng đầu. Tôi đã cố kiểm tra Element.value! == không xác định (vì một số phần tử như có thể không có thuộc tính html nhưng có thể có thuộc tính giá trị javascript ở đâu đó trên chuỗi nguyên mẫu), tuy nhiên điều đó không hoạt động tốt và có nhiều trường hợp cạnh. Dường như không có cách nào tốt để chứng minh điều này trong tương lai, vì vậy một danh sách trắng dường như là lựa chọn tốt nhất.

Điều này đăng ký phần tử ở cuối giai đoạn bong bóng sự kiện, vì vậy nếu bạn muốn xử lý Backspace theo bất kỳ cách tùy chỉnh nào, bạn có thể làm như vậy trong các trình xử lý khác.

Điều này cũng kiểm tra ví dụ HTMLTextAreE bổ sung vì về mặt lý thuyết người ta có thể có một thành phần web kế thừa từ đó.

Điều này không kiểm tra nội dung Chỉnh sửa (kết hợp với các câu trả lời khác).

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

Sơ đồ trang web: Vô hiệu hóa trở lại cho Javascript

event.stopPropagation()và event.preventDefault()không làm gì trong IE. Tôi đã phải gửi trả lại event.keyCode == 11(tôi chỉ chọn một cái gì đó) thay vì chỉ nói "if not = 8, run the event"để làm cho nó hoạt động, mặc dù. event.returnValue = falsecũng hoạt động.

Một phương pháp khác sử dụng 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>

Tôi đã sử dụng mã này trong mã của tôi một thời gian rồi. Tôi viết bài kiểm tra trực tuyến cho sinh viên và gặp vấn đề khi sinh viên đang nhấn backspace trong bài kiểm tra của họ và nó sẽ đưa họ trở lại màn hình đăng nhập. Bực bội! Nó hoạt động trên FF chắc chắn.

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