Bagaimana saya bisa mencegah tombol backspace dari menavigasi kembali?

Pada IE saya bisa melakukan ini dengan jQuery (sangat tidak standar, tetapi berfungsi)

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

Tetapi apakah mungkin dilakukan dengan cara yang berfungsi pada Firefox, atau dengan cara lintas-browser untuk mendapatkan bonus?

Untuk catatan:

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

tidak melakukan apa-apa.

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

memecahkan masalah, tetapi membuat kunci ruang mundur tidak dapat digunakan pada halaman, yang bahkan lebih buruk daripada perilaku asli.

EDIT: Alasan saya melakukan ini adalah karena saya tidak membuat halaman web sederhana tetapi aplikasi besar. Sangat menyebalkan kehilangan 10 menit kerja hanya karena Anda menekan backspace di tempat yang salah. Rasio mencegah kesalahan vs pengguna yang mengganggu harus jauh di atas 1000/1 dengan mencegah backspace key dari menavigasi kembali.

EDIT2: Saya tidak berusaha mencegah navigasi riwayat, hanya kecelakaan.

EDIT3: komentar @brentonstrines (pindah ke sini karena pertanyaannya sangat populer): Ini adalah 'perbaikan' jangka panjang, tetapi Anda dapat membuang dukungan Anda di balik bug Chromium untuk mengubah perilaku ini di webkit

Kode ini memecahkan masalah, setidaknya di IE dan Firefox (belum menguji yang lain, tapi saya memberikan kesempatan yang masuk akal untuk bekerja jika masalahnya bahkan ada di browser lain).

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

Kode ini berfungsi pada semua browser dan menelan tombol backspace ketika tidak pada elemen form, atau jika elemen form dinonaktifkan | readOnly. Ini juga efisien, yang penting ketika dijalankan pada setiap kunci yang diketikkan.

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

Jawaban lain di sini telah menetapkan bahwa ini tidak dapat dilakukan tanpa elemen daftar putih di mana Backspace diizinkan. Solusi ini tidak ideal karena daftar putih tidak semudah hanya textareas dan input teks / kata sandi, tetapi berulang kali ditemukan tidak lengkap dan perlu diperbarui.

Namun, karena tujuan menekan fungsionalitas backspace hanyalah untuk mencegah pengguna kehilangan data secara tidak sengaja, solusi beforeunload adalah solusi yang bagus karena modal popup mengejutkan - modal popup buruk ketika dipicu sebagai bagian dari alur kerja standar, karena pengguna terbiasa mengabaikannya tanpa membacanya, dan mereka menjengkelkan. Dalam hal ini, popup modal hanya akan muncul sebagai alternatif untuk tindakan yang langka dan mengejutkan, dan karenanya dapat diterima.

Masalahnya adalah modal sebelumnya tidak boleh muncul setiap kali pengguna menavigasi jauh dari halaman (seperti ketika mengklik tautan atau mengirimkan formulir), dan kami tidak ingin memulai daftar putih atau memasukkan daftar hitam khusus pada kondisi sebelum memuat.

Kombinasi ideal pengorbanan untuk solusi umum adalah sebagai berikut: melacak apakah backspace ditekan, dan hanya memunculkan modal onbeforeunload jika itu. Dengan kata lain:

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

Ini telah diuji untuk berfungsi di IE7 +, FireFox, Chrome, Safari, dan Opera. Cukup masukkan fungsi ini ke global.js Anda dan panggil dari halaman mana pun di mana Anda tidak ingin pengguna kehilangan data mereka.

Perhatikan bahwa modal onbeforeunload hanya dapat dipicu sekali, jadi jika pengguna menekan backspace lagi, modal tidak akan menyala lagi.

Perhatikan bahwa ini tidak akan memicu pada acara hashchange, namun dalam konteks itu Anda dapat menggunakan teknik lain untuk mencegah pengguna kehilangan data secara tidak sengaja.

Solusi yang lebih elegan / ringkas:

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

Modifikasi Jawaban erikkallen untuk mengatasi berbagai jenis input

Saya telah menemukan bahwa pengguna yang giat dapat menekan backspace pada kotak centang atau tombol radio dalam upaya sia-sia untuk menghapusnya dan sebaliknya mereka akan menavigasi mundur dan kehilangan semua data mereka.

Perubahan ini harus mengatasi masalah itu.

Edit Baru untuk membahas konten yang dapat diedit

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

Contoh
Untuk menguji membuat 2 file.

starthere.htm - buka ini dulu sehingga Anda punya tempat untuk kembali

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

test.htm - Ini akan menavigasi mundur ketika backspace ditekan saat kotak centang atau kirim memiliki fokus (dicapai dengan tabbing). Ganti dengan kode saya untuk memperbaikinya.

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

Berdasarkan komentar, tampaknya Anda ingin menghentikan orang kehilangan informasi dalam bentuk, jika mereka menekan backspace untuk menghapus tetapi bidang tidak fokus.

Dalam hal ini, Anda ingin melihat event handler onunload . Stack Overflow menggunakannya - jika Anda mencoba untuk meninggalkan halaman ketika Anda mulai menulis jawaban, itu muncul peringatan.

Berhenti menavigasi kode ini berfungsi!

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

Tetapi untuk tidak membatasi bidang teks tetapi yang lain

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

Untuk mencegahnya untuk bidang tertentu cukup gunakan

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

Mengacu pada yang di bawah ini!

Cegah BACKSPACE dari menavigasi kembali dengan jQuery (Seperti Beranda Google)

Sebagian besar jawabannya adalah jquery. Anda dapat melakukan ini dengan sempurna dalam Javascript murni, sederhana dan tidak perlu pustaka. Artikel ini adalah titik awal yang baik bagi saya tetapi karena keyIdentifier sudah tidak digunakan lagi, saya ingin kode ini lebih aman sehingga saya menambahkan || e.keyCode == 8 ke pernyataan if. Juga, kode tidak berfungsi dengan baik pada Firefox jadi saya menambahkan return false; dan sekarang ini bekerja dengan sangat baik. Ini dia:

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

Kode ini berfungsi dengan baik karena,

1. Itu dalam javascript murni (tidak perlu perpustakaan)
2. Tidak hanya memeriksa tombol yang ditekan, itu menegaskan apakah tindakan itu benar-benar tindakan "kembali" browser.
3. Bersama dengan hal di atas, pengguna dapat mengetik dan menghapus teks dari kotak teks input pada halaman web tanpa masalah sambil tetap mencegah aksi tombol kembali.
4. Ini pendek, bersih, cepat dan langsung ke intinya.

Anda dapat menambahkan console.log (e); untuk keperluan pengujian Anda, dan tekan F12 di chrome, buka tab "konsol" dan tekan "backspace" pada halaman dan lihat di dalamnya untuk melihat nilai apa yang dikembalikan, maka Anda dapat menargetkan semua parameter tersebut untuk lebih meningkatkan kode di atas sesuai dengan kebutuhan Anda.

Menggabungkan solusi yang diberikan oleh "thetoolman" && "Biff MaGriff"

kode berikut tampaknya berfungsi dengan benar di 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();
    });
}); 

Tidak yakin mengapa tidak ada yang menjawab ini - sepertinya pertanyaan teknis yang masuk akal untuk menanyakan apakah itu mungkin.

Tidak, saya tidak berpikir ada cara lintas browser untuk menonaktifkan tombol backspace. Saya tahu itu tidak diaktifkan secara default di FF hari ini.

Saya kesulitan menemukan jawaban non-JQUERY. Terima kasih kepada Stas karena telah menempatkan saya di trek.

Chrome: Jika Anda tidak memerlukan dukungan lintas browser, Anda bisa menggunakan daftar hitam, bukan daftar putih. Versi JS murni ini berfungsi di Chrome, tetapi tidak di IE. Tidak yakin tentang FF.

Di Chrome (ver. 36, pertengahan 2014), penekanan tombol yang bukan pada input atau elemen yang dapat diedit tampaknya ditargetkan untuk <BODY>. Ini memungkinkan menggunakan daftar hitam, yang saya pilih untuk masuk daftar putih. IE menggunakan target klik terakhir - jadi mungkin div atau apa pun. Itu membuat ini tidak berguna di 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: Untuk javascript murni, saya menemukan jawaban Stas sebagai yang terbaik. Menambahkan satu lagi pemeriksaan kondisi untuk konten yang dapat diedit membuatnya berfungsi untuk saya *:

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

* Perhatikan bahwa IEs [edit: dan Spartan / TechPreview] memiliki "fitur" yang membuat elemen terkait tabel tidak dapat diedit . Jika Anda mengklik salah satunya dan MAKA tekan backspace, itu AKAN menavigasi kembali. Jika Anda tidak memiliki <td>s yang dapat diedit , ini bukan masalah.

Solusi ini mirip dengan yang lain yang telah diposting, tetapi menggunakan daftar putih sederhana sehingga mudah disesuaikan untuk memungkinkan backspace dalam elemen tertentu hanya dengan mengatur pemilih dalam fungsi .is ().

Saya menggunakannya dalam formulir ini untuk mencegah backspace pada halaman dari menavigasi kembali:

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

Untuk sedikit menguraikan jawaban luar biasa @ erikkallen , berikut adalah fungsi yang memungkinkan semua jenis input berbasis keyboard, termasuk yang diperkenalkan dalam 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 - cara jQuery:

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

Javascript - cara asli, yang berfungsi untuk saya:

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

Saya punya beberapa masalah dengan solusi yang diterima dan plugin Select2.js; Saya tidak dapat menghapus karakter dalam kotak yang dapat diedit karena tindakan penghapusan sedang dicegah. Ini solusi saya:

//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 membuat Span dengan atribut "contentEditable" yang disetel ke true untuk kotak kombo yang dapat diedit di dalamnya. Saya menambahkan kode ke akun untuk span tagName dan atribut yang berbeda. Ini menyelesaikan semua masalah saya.

Sunting: Jika Anda tidak menggunakan plugin combobox Select2 untuk jquery, maka solusi ini mungkin tidak diperlukan oleh Anda, dan solusi yang diterima mungkin lebih baik.

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

Kode ini menyelesaikan masalah di semua browser:

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

  }

Cara termudah untuk mencegah navigasi saat menekan backspace

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

Menggunakan Dojo toolkit 1.7, ini berfungsi di 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()});
});

Sudahkah Anda mencoba solusi yang sangat sederhana dengan hanya menambahkan atribut berikut ke bidang teks hanya baca Anda:

onkeydown = "return false;"

Ini akan menjaga browser agar tidak kembali ke riwayat ketika tombol Backspace ditekan dalam bidang teks hanya baca. Mungkin saya kehilangan niat Anda yang sebenarnya, tetapi sepertinya ini akan menjadi solusi paling sederhana untuk masalah Anda.

Solusi yang jauh lebih rapi -

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

Bergantian, Anda hanya dapat memeriksa apakah

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

Versi javascript murni, yang berfungsi di semua browser:

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

Tentu saja Anda dapat menggunakan "INPUT, TEXTAREA" dan gunakan "if (! Regex.test (elements))" lalu. Yang pertama bekerja dengan baik untuk saya.

Performa?

Saya khawatir tentang kinerja dan membuat biola: http://jsfiddle.net/felvhage/k2rT6/9/embedded/result/

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

Saya telah menganalisis metode paling menjanjikan yang saya temukan di utas ini. Ternyata, mereka semua sangat cepat dan kemungkinan besar tidak menimbulkan masalah dalam hal "kelesuan" saat mengetik. Metode paling lambat yang saya lihat adalah sekitar 125 ms untuk 10.000 Panggilan di IE8. Yaitu 0,0125 ms per Stroke.

Saya menemukan metode yang diposting oleh Codenepal dan Robin Maben menjadi yang tercepat ~ 0.001ms (IE8) tetapi waspadalah terhadap semantik yang berbeda.

Mungkin ini melegakan bagi seseorang yang memperkenalkan fungsi semacam ini pada kodenya.

Jawaban erikkallen yang dimodifikasi:

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

Solusi ini bekerja dengan sangat baik ketika diuji.

Saya memang menambahkan beberapa kode untuk menangani beberapa bidang input yang tidak ditandai dengan input, dan untuk mengintegrasikan dalam aplikasi Oracle PL / SQL yang menghasilkan formulir input untuk pekerjaan saya.

"Dua sen" saya:

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

Saya membuat proyek NPM dengan versi bersih dari erikkallen yang saat ini diterima

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

Pada dasarnya ia menggunakan prinsip yang sama tetapi:

• Tidak ada ketergantungan
• Dukungan untuk konten yang dapat diedit
• Basis kode lebih mudah dibaca / dipelihara
• Akan didukung karena akan digunakan dalam produksi oleh perusahaan saya
• Lisensi 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);
};

Inilah penulisan ulang jawaban yang saya pilih. Saya mencoba memeriksa element.value! == undefined (karena beberapa elemen seperti mungkin tidak memiliki atribut html tetapi mungkin memiliki properti nilai javascript di suatu tempat di rantai prototipe), namun itu tidak berfungsi dengan baik dan memiliki banyak kasus tepi. Tampaknya tidak ada cara yang baik untuk membuktikan di masa depan, jadi daftar putih tampaknya merupakan pilihan terbaik.

Ini mendaftarkan elemen pada akhir fase gelembung acara, jadi jika Anda ingin menangani Backspace dengan cara kustom apa pun, Anda bisa melakukannya di penangan lain.

Ini juga memeriksa instance dari HTMLTextAreElement karena seseorang secara teoritis dapat memiliki komponen web yang diwarisi dari itu.

Ini tidak memeriksa contentEditable (gabungkan dengan jawaban lain).

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: Nonaktifkan kembali untuk Javascript

event.stopPropagation()dan event.preventDefault()tidak melakukan apa pun di IE. Saya harus mengirim kembali event.keyCode == 11(saya hanya mengambil sesuatu) daripada hanya mengatakan "if not = 8, run the event"untuk membuatnya bekerja. event.returnValue = falsejuga berfungsi.

Metode lain menggunakan 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>

Saya telah menggunakan ini dalam kode saya untuk beberapa waktu sekarang. Saya menulis tes online untuk siswa dan mengalami masalah ketika siswa menekan backspace selama tes mereka dan itu akan membawa mereka kembali ke layar login. Frustrasi! Ini bekerja pada FF pasti.

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