バックスペースキーが元に戻らないようにするにはどうすればよいですか？

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

問題は解決しますが、ページでバックスペースキーが使用できなくなります。これは、元の動作よりもさらに悪いものです。

編集：これを行う理由は、単純なWebページではなく大きなアプリケーションを作成しているためです。間違った場所でバックスペースを押したからといって、10分の作業を失うのは信じられないほど煩わしいことです。間違いを防止することとユーザーを煩わしいものにすることの比率は、バックスペースキーが戻るのを防ぐことにより、1000/1をはるかに超える必要があります。

EDIT2：私は履歴ナビゲーションを防止しようとしているのではなく、ただの事故です。

EDIT3：@brentonstrinesコメント（質問が非常に人気があるため、ここに移動しました）：これは長期的な「修正」ですが、サポートを Chromiumバグの、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;
        }
    }
});

このコードはすべてのブラウザで機能し、フォーム要素上にない場合、またはフォーム要素が無効|読み取り専用の場合は、バックスペースキーを飲み込みます。これは効率的でもあります。これは、入力されたすべてのキーで実行されるときに重要です。

$(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とtext / password入力ほど単純ではないため、このソリューションは理想的ではありませんが、不完全であり、更新する必要があることが繰り返し見つかります。

ただし、バックスペース機能を抑制する目的は、ユーザーが誤ってデータを失うのを防ぐことだけであるので、モーダルポップアップは驚くべきものであるため、beforeunloadのソリューションは適切です。標準のワークフローの一部としてトリガーされると、モーダルポップアップは悪い状態になります。ユーザーがそれらを読まないでそれらを却下することに慣れていて、彼らは迷惑だからです。この場合、モーダルポップアップは、まれで意外なアクションの代替としてのみ表示されるため、許容されます。

問題は、ユーザーがページから移動したとき（リンクをクリックしたときやフォームを送信したときなど）にonbeforeunloadモーダルがポップアップしてはならず、特定のonbeforeunload条件のホワイトリストまたはブラックリストの作成を開始しないことです。

一般化されたソリューションのトレードオフの理想的な組み合わせは次のとおりです。バックスペースが押されているかどうかを追跡し、押されている場合のみonbeforeunloadモーダルをポップアップします。言い換えると：

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にドロップし、ユーザーが誤ってデータを失いたくない任意のページから呼び出します。

onbeforeunloadモーダルは一度しかトリガーできないので、ユーザーがもう一度Backspaceを押すと、モーダルは再び起動されないことに注意してください。

これはhashchangeイベントではトリガーされないことに注意してください。ただし、そのコンテキストでは、他の手法を使用して、ユーザーが誤ってデータを失うのを防ぐことができます。

よりエレガントで簡潔なソリューション：

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

さまざまな入力タイプに対処するためのerikkallenの回答の変更

私は、エンタープライズユーザーがチェックボックスまたはラジオボタンのバックスペースを押してそれをクリアしようとしても、それをクリアしようとすると、後方に移動してすべてのデータを失う可能性があることがわかりました。

この変更により、その問題に対処する必要があります。

コンテンツ編集可能なdivに対処するための新しい編集

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

例
テストでmake 2ファイルを作成します。

starthere.htm-最初にこれを開いて、戻る場所を用意します

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

test.htm-これは、チェックボックスまたは送信にフォーカスがあるときにバックスペースが押されると、後方に移動します（タブで実行）。修正するコードに置き換えます。

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

コメントに基づいて、バックスペースを押して削除してもフィールドがフォーカスされていない場合に、フォーム内の情報を失わないようにする必要があるようです。

その場合は、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にあります。これは、純粋なJavascriptで完璧に実行できます。シンプルで、ライブラリは必要ありません。この記事は私にとって良い出発点でしたが、keyIdentifierは非推奨であるため、このコードをより安全にしたかったので、|| e.keyCode == 8をifステートメントに追加しました。また、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. それは純粋なjavascriptです（ライブラリは必要ありません）。
2. 押されたキーをチェックするだけでなく、アクションが本当にブラウザの「戻る」アクションかどうかを確認します。
3. 上記と一緒に、ユーザーはWebページの入力テキストボックスからテキストを入力して削除できますが、[戻る]ボタンのアクションは妨げられません。
4. それは短く、きれいで、速く、要点はまっすぐです。

console.log（e）;を追加できます。テスト目的で、ChromeでF12を押し、「コンソール」タブに移動して、ページの「バックスペース」を押し、その中を調べて返される値を確認します。次に、これらのすべてのパラメーターを対象にして、コードをさらに拡張できます上記のあなたのニーズに合わせて。

「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でデフォルトで有効になっていないことを知っています。

このソリューションは、投稿されている他のソリューションと似ていますが、シンプルなホワイトリストを使用して、.is（）関数でセレクターを設定するだけで、簡単にカスタマイズして、指定した要素のバックスペースを許可できます。

私はそれをこのフォームで使用して、ページのバックスペースがナビゲートしないようにします。

$(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（バージョン36、2014年半ば）では、入力要素またはコンテンツ編集可能要素ではないキープレスがを対象とするようです<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();
        }
    }
}  

クロスブラウザー： 純粋なJavaScriptの場合、私はStasの回答が最良であることがわかりました。contenteditableの条件チェックをもう1つ追加すると、動作します*：

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

* IE [編集：およびSpartan / TechPreview]には、テーブル関連の要素を編集不可にする「機能」があることに注意してください。それらの1つをクリックしてから、Backspaceキーを押すと、元に戻ります。編集可能ながない場合<td>、これは問題ではありません。

承認されたソリューションと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は、「contentEditable」の属性を持つスパンを作成します。これは、その中の編集可能なコンボボックスに対してtrueに設定されています。スパンのtagNameと異なる属性を説明するコードを追加しました。これは私のすべての問題を解決しました。

編集：jqueryにSelect2 comboboxプラグインを使用していない場合、このソリューションは必要ない可能性があり、受け入れられているソリューションの方が優れている場合があります。

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

  }

バックスペースを押したときにナビゲーションを防止する最も簡単な方法

$(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')

すべてのブラウザで機能する純粋なJavaScriptバージョン：

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（elements））"を使用することもできます。最初は私にとってはうまくいきました。

パフォーマンス？

私はパフォーマンスが心配でいじくり回しました：http : //jsfiddle.net/felvhage/k2rT6/9/embedded/result/

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

このスレッドで見つけた最も有望な方法を分析しました。結局のところ、それらはすべて非常に高速であり、タイピング時に「緩み」の点で問題を引き起こすことはほとんどありません。私が調べた最も遅い方法は、IE8の10.000コールで約125ミリ秒でした。ストロークあたり0.0125msです。

CodenepalとRobin Mabenによって投稿されたメソッドは最速〜0.001ms（IE8）であることがわかりましたが、異なるセマンティクスに注意してください。

おそらくこれは、この種の機能を自分のコードに導入する誰かにとっての救済です。

変更されたエリッカレンの回答：

$(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アプリケーションに統合するコードを追加しました。

私の「2セント」：

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

現在受け入れられている（erikkallenの）クリーンバージョンのNPMプロジェクトを作成しました

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属性がなくても、プロトタイプチェーンのどこかにjavascriptのvalueプロパティがある可能性があるため）。これを将来にわたって保証するための良い方法はないようですので、ホワイトリストが最良のオプションのようです。

これにより、イベントバブルフェーズの最後に要素が登録されるため、任意のカスタム方法でBackspaceを処理したい場合は、他のハンドラーで行うことができます。

これは、HTMLTextAreElementのインスタンスもチェックします。理論的には、それから継承するWebコンポーネントがあるためです。

これは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>

これをコードでしばらく使用しています。私は学生向けのオンラインテストを作成し、学生がテスト中にバックスペースを押していたときに問題に遭遇し、ログイン画面に戻りました。イライラ！それは確かにFFで動作します。

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