动态选择Javascript DOM元素

我编写了一个脚本，该脚本仅在选择DOM元素（而不是jQuery对象）时工作。但是，我无法为多个元素打开或关闭它

以下是标记：

<div class="tab-pane active">
  <div class="heading">
    <h1>Heading for Tab One</h1>
  </div>                  
  <p class="content" contenteditable="true">Editable Content when focused on</p>
</div> 
<div class="tab-pane active">
  <div class="heading">
    <h1>Heading for Tab Two</h1>
  </div>                  
  <p class="content" contenteditable="true">Editable Content when focused on</p>
</div>
<div class="tab-pane active">
  <div class="heading">
    <h1>Heading for Tab Three</h1>
  </div>                  
  <p class="content" contenteditable="true">Editable Content when focused on</p>
</div>

//this works but only for the first paragraph
var input = $('p.content[contenteditable]')[0];
$(input).keypress(function(e){       
  var sel = window.getSelection();      
  var node = sel.anchorNode;
  //if ENTER was pressed while caret was inside the editable paragraph
    if(node.parentNode === input && e.keyCode === 13 ){        
    // prevent the browsers from inserting <div>, <p>, or <br> on their own
    e.preventDefault();
    // the caret position inside the node
    offset = sel.anchorOffset;
    // insert a '\n' character at that position
    text = node.textContent;
    textBefore = text.slice( 0, offset );
    textAfter = text.slice( offset ) || ' ';
    node.textContent = textBefore + '\n' + textAfter;

    // position the caret after that new-line character
    range = document.createRange();
    range.setStart( node, offset + 1 );
    range.setEnd( node, offset + 1 );

    // update the selection
    sel.removeAllRanges();
    sel.addRange( range );
    }
});

---

我认为在每个焦点操作上绑定事件处理程序（在您的例子中是

keypress

）是个坏主意。最好分开做：

var focused;

$('p.content[contenteditable]').on('focus', function() {
  focused = this;
});

$('p.content[contenteditable]').on("keypress", function(e){     
  var sel = window.getSelection();      
  var node = sel.anchorNode;
  //if ENTER was pressed while caret was inside the editable paragraph
    if(node.parentNode === focused && e.keyCode === 13 ){        
      e.preventDefault();
      console.log('HEY!');
      //do stuff
    }
});

---

下面是一个例子。

我发现javascript DOM元素根本不需要。因此，以下代码就足够了：

$('p.content[contenteditable]').keypress(function(e){       
  var sel = window.getSelection();      
  var node = sel.anchorNode;
  //if ENTER was pressed while caret was inside the editable paragraph
    if(e.keyCode === 13 ){        
    // prevent the browsers from inserting <div>, <p>, or <br> on their own
    e.preventDefault();
    // the caret position inside the node
    offset = sel.anchorOffset;
    // insert a '\n' character at that position
    text = node.textContent;
    textBefore = text.slice( 0, offset );
    textAfter = text.slice( offset ) || ' ';
    node.textContent = textBefore + '\n' + textAfter;

    // position the caret after that new-line character
    range = document.createRange();
    range.setStart( node, offset + 1 );
    range.setEnd( node, offset + 1 );

    // update the selection
    sel.removeAllRanges();
    sel.addRange( range );
    }
});

$（'p.content[contenteditable]'）。按键（函数（e）{
var sel=window.getSelection（）；
var节点=选择固定节点；
//如果在插入符号位于可编辑段落内时按ENTER键
如果（e.keyCode===13）{
//阻止浏览器自行插入、或

e、 预防默认值（）；
//节点内的插入符号位置
偏移量=选择锚定偏移量；
//在该位置插入“\n”字符
text=node.textContent；
textBefore=text.slice（0，偏移量）；
textfafter=text.slice（偏移量）| |“”；
node.textContent=textBefore+'\n'+textAfter；
//将插入符号置于新行字符之后
range=document.createRange（）；
range.setStart（节点，偏移量+1）；
range.setEnd（节点，偏移量+1）；
//更新所选内容
选择removeAllRanges（）；
选择添加范围（范围）；
}
});

将一个事件处理程序绑定到另一个事件处理程序中几乎总是错误的。每次你关注一个段落时，你都会添加另一个按键处理程序，因此你最终会运行多个按键处理程序。虽然我没有在这里显示它，但我会将事件

关闭（）

打开

blur

。我希望代码示例尽可能小，以便未来的观众无需翻阅不相关的代码即可获得答案。为什么需要关闭活动？当元素没有焦点时，它不会接收keypress事件，因此拥有处理程序没有坏处。是的，这确实有效。然而，我想我是疯了，因为当与附加代码（替换do stuff注释的代码）一起使用时，它不起作用。添加了do-stuff代码。里面有什么东西会阻止它工作吗？同样，当选择器是JavaScriptDOM元素时，它可以完美地工作，但当它是Jquery对象时，它就不能工作。最后，我阻止在按下enter键时添加诸如

div

、

p

和

br

等标记，而是添加

\n

，以便将更改保存到数据库中。

$('p.content[contenteditable]').keypress(function(e){       
  var sel = window.getSelection();      
  var node = sel.anchorNode;
  //if ENTER was pressed while caret was inside the editable paragraph
    if(e.keyCode === 13 ){        
    // prevent the browsers from inserting <div>, <p>, or <br> on their own
    e.preventDefault();
    // the caret position inside the node
    offset = sel.anchorOffset;
    // insert a '\n' character at that position
    text = node.textContent;
    textBefore = text.slice( 0, offset );
    textAfter = text.slice( offset ) || ' ';
    node.textContent = textBefore + '\n' + textAfter;

    // position the caret after that new-line character
    range = document.createRange();
    range.setStart( node, offset + 1 );
    range.setEnd( node, offset + 1 );

    // update the selection
    sel.removeAllRanges();
    sel.addRange( range );
    }
});