バックスペースを検出し、「入力」イベントを削除しますか?


93

どうやってするか?

私は試した:

var key = event.which || event.keyCode || event.charCode;

if(key == 8) alert('backspace');

しかし、それは動作しません...

keypressイベントでも同じように機能しますが、入力した文字が入力フィールドに出力されるため、keypressを使用したくありません。それを制御できるようにする必要があります


私のコード:

  $('#content').bind('input', function(event){

    var text = $(this).val(),
        key = event.which || event.keyCode || event.charCode;

    if(key == 8){
      // here I want to ignore backspace and del
    }

    // here I'm doing my stuff
    var new_text = 'bla bla'+text;
    $(this).val(new_text);
  });

入力に文字を追加しないでください。val()で追加するもの以外は、実際にはユーザーからの入力を完全に無視する必要があります。キーを押すアクションだけが重要です。


3
実際にはoring-eventを実行する必要はありません。これは問題ありません。jQueryはイベントオブジェクトを正規化します。api.jquery.com/category/events/event-objectを
Niko

.bindセレクタではなく、の最初の引数としてイベントの名前を指定することになっています。あるべき$('content').bind('keypress', ...
pmrotule

回答:


119

を使用.onkeydownして削除をキャンセルしreturn false;ます。このような:

var input = document.getElementById('myInput');

input.onkeydown = function() {
    var key = event.keyCode || event.charCode;

    if( key == 8 || key == 46 )
        return false;
};

または、jQueryを使用します。質問にjQueryタグを追加したためです。

jQuery(function($) {
  var input = $('#myInput');
  input.on('keydown', function() {
    var key = event.keyCode || event.charCode;

    if( key == 8 || key == 46 )
        return false;
  });
});


19
右クリック>貼り付けからの入力をキャッチしたい場合はどうなりますか?
ctb

6
keydownChrome Androidでは機能せず、BackspaceまたはDelをクリックすると空を返します
Kosmetika

2
関数では、イベントをパラメーターとして保持する必要があるので、関数(イベント)-------------------------- var input = documentのように機能します。 getElementById( 'myInput'); input.onkeydown = function(event){var key = event.keyCode || event.charCode; if(key == 8 || key == 46)はfalseを返します。};
Anurag_BEHS 2016年

1
jQuery enterbackspace使用すると、inputイベントを内部的にフィルタリングしてキーを押し、これらのキーを押しても到達しません
vsync

@Wouter-大したことではありませんが、jqueryのコードにタイプミスがあると思います。onkeydownイベントハンドラーにパラメーター名「event」を追加するつもりだったと思います。
RoboBear 2017

14

jQueryを使用

event.whichプロパティはevent.keyCodeとevent.charCodeを正規化。キーボードのキー入力にはevent.whichを監視することをお勧めします。

http://api.jquery.com/event.which/

jQuery('#input').on('keydown', function(e) {
    if( e.which == 8 || e.which == 46 ) return false;
});

2
私は長い間jQueryを使用していますが、これを見たことはありません。何か新しいことを学ぶのにいつも良い。+1!
Sablefoste

9

event.key === "バックスペース"

より新しく、よりクリーン:を使用しますevent.key。これ以上の任意の番号コードはありません!

input.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace" || key === "Delete") {
        return false;
    }
});

Mozillaドキュメント

サポートされているブラウザ


時々 event.key戻り、私は理解できない理由は、「プロセス」...
オスカーチェンバース

サポートされているブラウザです。バグがあるか、カスタムキーボードがキーダウンイベントを起動しない可能性があります
Gibolt

3

「onkeydown」を使ってみましたか?これはあなたが探しているイベントです。

入力が挿入される前に動作し、char入力をキャンセルできます。


しかし、どうすればキャンセルできますか?入力でval()を使用していて、入力された文字がまだ追加されているため
Alex

3
いかがevent.preventDefault()ですか?
Niko

return false;jQueryを使用しているときは、イベントをキャンセルするだけです。
iMoses 2012年

3

これは古い質問ですが、キーダウン、キープレス、キーアップではなく、入力時にバックスペースイベントをキャッチしたい場合は、これらのいずれかが特定の機能を壊し、自動化されたテキストのフォーマットで厄介な遅延を引き起こしていることに気付きました。 -inputTypeを使用してバックスペースをキャッチできます。

document.getElementsByTagName('input')[0].addEventListener('input', function(e) {
    if (e.inputType == "deleteContentBackward") {
        // your code here
    }
});

3

keydownevent.key === "Backspace" or "Delete"

より新しく、よりクリーン:を使用しますevent.key。これ以上の任意の番号コードはありません!

input.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace" || key === "Delete") {
        return false;
    }
});

モダンなスタイル:

input.addEventListener('keydown', ({key}) => {
    if (["Backspace", "Delete"].includes(key)) {
        return false
    }
})

Mozillaドキュメント

サポートされているブラウザ



0
//Here's one example, not sure what your application is but here is a relevant and likely application 
function addDashesOnKeyUp()
{
    var tb = document.getElementById("tb1"); 
    var key = event.which || event.keyCode || event.charCode;

    if((tb.value.length ==3 || tb.value.length ==7 )&& (key !=8) ) 
    {
        tb.value += "-"
    } 
}

0

クロムを使用するAndroidデバイスでは、バックスペースを検出できません。あなたはそれに回避策を使うことができます:

var oldInput = '',
    newInput = '';

 $("#ID").keyup(function () {
  newInput = $('#ID').val();
   if(newInput.length < oldInput.length){
      //backspace pressed
   }
   oldInput = newInput;
 })

私は本当にこれが答えにしたくないが、それは彼らが設定しているので、のようだwhichkeyCode229により良い方法、または近日より良い方法があるに違いありませんが、私は今のところ基本的には、この使用することがあります。 ..
JohnnyFun
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.