使用带有JS函数的onkeydown来改变contenteditable

Question

我已经看到了一些关于用JS改变contenteditables的问题，但是没有一个对我有意义，所以

我有一个HTML代码段

<div id="input" contenteditable="true" onkeydown="checkEnter()"></div>

然后我在HTML正文的末尾链接JS脚本

<script src='js/jscript.js'></script>

和相应的JS函数是

function checkEnter() {
  if (this.keyCode == 13) {
    this.setAttribute("contenteditable", false);
  }
}

基本上，用户应该能够输入文字，按下后输入文字不再可编辑。

Answer 1

您可能不了解this是什么。

您需要将事件传递给函数：

＆＃13;

＆＃13;

function checkEnter(e) {
  if (e.keyCode == 13)
    e.target.setAttribute("contenteditable", false);

}

＆＃13;

#input {
  width: 250px;
  height: 100px;
  border: solid 1px
}

＆＃13;

<div id="input" contenteditable="true" onkeydown="checkEnter(event)"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

传递事件对象并使用它来检查键码

function checkEnter(event) {
  if (event.keyCode == 13) {
    this.setAttribute("contenteditable", false);
  }
}

<div id="input" contenteditable="true" onkeydown="checkEnter(event)">
  Here is element
</div>

Answer 3

这绑定到全局对象（窗口），因此您无法为div标记将contenteditable属性设置为false。