Question

我写了一个脚本，只有在选择了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 );
    }
});

为什么我必须像这样选择DOM对象？如果我使用this作为焦点段落的选择器并且on用于按键事件，为什么函数不起作用？

为什么在根据focus动态选择段落时不会起作用：

$('p.content[contenteditable]').focus(function(){ 
 var input = $(this);   
  $(input).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 === 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 );
      }
   });
});

Answer 1

我认为在每个焦点操作中绑定事件处理程序（在您的情况下为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
    }
});

这是fiddle。

Answer 2

我发现毕竟不需要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 );
    }
});

动态选择Javascript DOM元素

2 个答案: