为什么这个javascript onkeypress事件不能工作
为什么这个javascript onkeypress事件不能工作
提问于 2018-03-17 15:41:57
当我在文本区域中添加文本时，由于某种原因，当我使用$('#sentid1').onkeypress时，由于某种原因，这个示例应该会触发警报，并且只在我使用$('#sentid1').onkeypress时才能工作。
html部件：
<div id="textarea" contenteditable=""><span id="sentid1" class="sentence"> This is sentence 1. </span><span id="sentid2" class="sentence"> This is sentence 2.</span></div>Javascript/jQuery部分：
if (1==1) {
$('#sentid1').onkeypress = function(event) {
alert("theid: " + this.id);
};
} else{
document.onkeypress = function(event) {
alert("theid: " + this.id);
};
}回答 5
Stack Overflow用户
回答已采纳
发布于 2018-03-17 15:59:05
你是如何测试按键事件的？为了触发keypress事件，您需要您的元素要么是以为焦点的，要么是触发键按的其他元素的父元素，因此keypress是冒泡的。
您正试图在 span 上捕获按键，默认情况下span是不可聚焦的，例如，让我们使用tabindex来实现它
<span id="sentid1" class="sentence" tabindex="0"> This is sentence 1. </span>现在您实际上可以在这个跨度上单击，按一些键并查看预期的结果。
Stack Overflow用户
发布于 2018-03-17 15:58:24
您应该像下面这样附加事件处理程序
$(...).keypress(function(event) {...} )或
$(...).on('keypress', function(event) {...} )它需要附加到#textarea，因为这是可以接受输入的元素，而span不能。
$('#textarea').keypress(function(event) {
alert("theid: " + this.id);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textarea" contenteditable=""><span id="sentid1" class="sentence"> This is sentence 1. </span><span id="sentid2" class="sentence"> This is sentence 2.</span></div>
根据评论更新
如果要获得span，请这样做，使用event.target.id获取哪个span
$('#textarea').keypress(function(event) {
alert("theid: " + event.target.id);
});#textarea {
position: relative;
}
span[contenteditable] {
outline: none;
}
span[contenteditable]:focus::before {
content: '';
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
outline: 2px solid lightblue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textarea"><span contenteditable="" id="sentid1" class="sentence"> This is sentence 1. </span><span contenteditable="" id="sentid2" class="sentence"> This is sentence 2.</span></div>
Stack Overflow用户
发布于 2018-03-17 15:47:57
尝尝这个。对于jquery选择器$(‘#多愁善感1’)，请使用jquery键按
if (1==1) {
$('#sentid1').keypress(function() {
alert("theid: " + this.id);
});
} else {
document.keypress(function() {
alert("theid: " + this.id);
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49338693
复制相关文章
相似问题
腾讯云开发者
