在“输入”事件上检测退格和 del？

怎么做？

我试过:

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


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

but it doesn't work...

如果我对 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 ()添加的内容之外，不应该在输入中添加任何字符 实际上用户的输入应该被完全忽略，只有按键的动作对我来说是重要的

265233 次浏览
小开

你试过使用“ onkeydown”吗？ 这就是你要找的活动。

它在插入输入之前进行操作，并允许您取消 char 输入。

小开
最佳答案

使用 .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;
});
});

​

小开

用 jQuery

事件属性规范化 event.keyCode 和 event.charCode。

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

jQuery('#input').on('keydown', function(e) {
if( e.which == 8 || e.which == 46 ) return false;
});
小开 
$('div[contenteditable]').keydown(function(e) {
// trap the return key being pressed
if (e.keyCode === 13 || e.keyCode === 8)
{
return false;
}
});
小开

event.key === "Backspace"

More recent and much cleaner: use event.key. No more arbitrary number codes!

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

Mozilla 文档

Supported Browsers

小开

keydown和 event.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 Docs

支援的浏览器

小开 
//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 += "-"
}
}
小开

在机器人设备上使用铬，我们无法检测到退格。 You can use workaround for it:

var oldInput = '',
newInput = '';


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

这是一个老问题了，但是如果你想在输入时捕获一个退格事件，而不是键盘输入、键盘输入或键盘输入(keyup)ーー正如我注意到的那样，其中任何一个都会破坏我编写的某些函数，并导致自动文本格式化的尴尬延迟ーー你可以使用 inputType 捕获一个退格事件:

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

现场演示

Javascript
<br>
<input id="input">
<br>
or
<br>
jquery
<br>
<input id="inpu">


<script type="text/javascript">
var myinput = document.getElementById('input');
input.onkeydown = function() {
if (event.keyCode == 8) {
alert('you pressed backspace');
//event.preventDefault(); remove // to prevent backspace
}


if (event.keyCode == 46) {
alert('you pressed delete');
//event.preventDefault(); remove // to prevent delete
}
};


//jquery code


$('#inpu').on('keydown', function(e) {
if (event.which == 8) {
alert('you pressed backspace');
//event.preventDefault(); remove // to prevent backspace
}


if (event.which == 46) {
alert('you pressed delete');
//event.preventDefault(); remove // to prevent delete
}
});
</script>
小开

InputEvent.inputType可用于退格检测 Mozilla 文档。 它可以在 Chrome 桌面、 Chrome Android 和 Safari iOS 上运行。

<input type="text" id="test" />


<script>
document.getElementById("test").addEventListener('input', (event) => {
console.log(event.inputType);
// Typing of any character event.inputType = 'insertText'
// Backspace button event.inputType = 'deleteContentBackward'
// Delete button event.inputType = 'deleteContentForward'
})
</script>

提交答案