用纯javascript突出可编辑的p标记

Question

我有以下html

<p contenteditable>The greatest p tag of all p tags all the time</p>

而这个js

var p = document.querySelector('p');

p.addEventListner('keypress', function (e) {
    if (e.which === 13) {
        //this.focusout() ??;
    }
});

演示

但这东西不管用。如何使p标签与回车命中对焦。不需要jquery。谢谢:-)

Answer 1

你拼错了Listener所以按键没被抓到。你也会想要阻止这样的按键

​

var p = document.querySelector('p');
p.addEventListener('keypress', function (e) {
    if (e.which === 13) {
        this.blur();
        e.preventDefault();
    }
});

<p contenteditable>The greatest p tag of all p tags all the time</p>

​

Answer 2

我认为正确的方法是.blur()

因此，以下几点就足够了：

var p = document.querySelector('p');

p.addEventListener('keypress', function (e) { // you spelt addEventListener wrongly
    if (e.which === 13) {
        e.preventDefault();// to prevent the default enter functionality
        this.blur();            
    }
});

Answer 3

尝试使用event.preventDefault()，创建具有width、height设置为0px、opacity设置为0的input元素。如果event.keyCode等于13，则使用opacity 0调用input上的.focus()

var p = document.querySelector('p');

p.onkeypress = function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    document.getElementById("focus").focus();
  }
};

#focus {
  width: 0;
  height: 0;
  opacity: 0;
}

<p contentEditable>The greatest p tag of all p tags all the time</p>
<input id="focus" />

​

jsfiddle https://jsfiddle.net/ben86foo/10/