0

背景

尝试使用 content editable 编辑有序列表<div>。希望粘贴任何内容、键入任何内容或删除任何内容，并始终显示至少一个有序列表项，但绝不显示任何其他类型的文本（例如，无空行、无引用文本、无缩进、无 Microsoft 字体词等）。

使用 jQuery 1.9.1 支持尽可能多的浏览器。Fiddle的源代码如下。

代码

JavaScript（jQuery）：

$(document).ready(function() {
  $('.directions > ol').prop('contentEditable','true');
  $('.directions > ol').keydown( function( e ) {
    // Prevent shift-enter from creating blank lines.
    if( e.keyCode === 13 && e.shiftKey ) {
      e.preventDefault();
    }
  });

  $('body').on( 'focus', '[contenteditable]', function() {
    var $this = $(this);
    $this.data( 'before', $this.html() );
    return $this;
  }).on( 'paste blur input keyup', '[contenteditable]', function( e ) {
    var $this = $(this);

    if( $this.data('before') !== $this.html() ) {
      $this.data( 'before', $this.html() );
      $this.trigger( 'change' );
    }
  });

  $('.directions > ol').on( 'change', function( e ) {
    var fragment = $(this).clone();
    fragment.find( 'br' ).replaceWith( "\n" );
    var div = document.createElement( 'div' );
    var text = fragment.text().replace( /[\r\n]+/g, '\n' );
    text = '<ol><li>' + text.replace( /\n/g, '</li><li>' ) + '</li></ol>';
    $(this).replaceWith( text );
  });
});

的HTML：

<html>
<body>
<div class="directions">
  <ol>
    <li>Turn left onto 5th Street after 500m.</li>
  </ol>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/list.js" charset="utf-8"></script>
</body>
</html>

问题

当 contenteditable<ol>被替换时：

$(this).replaceWith( text );

删除以下事件绑定：

$('.directions > ol').prop('contentEditable','true');
.on( 'paste blur input keyup', '[contenteditable]', function( e ) {

问题

我的主要问题是：如何在<ol>不破坏contenteditable绑定的情况下替换内部内容 - 以便用户可以继续编辑内容，即使他们选择整个文本来替换它？

我的第二个问题是：这甚至是一种可行的方法吗？我研究了各种所见即所得的实现。对于这样一个看似简单的任务，它们看起来都非常复杂并且拥有巨大的足迹（除了Whizzywing ）。

4

1 回答 1

0

jQuery 可能会产生这样的意外副作用。有时使用常规 JavaScript 效果更好，即使有 jQuery 快捷方式。

我在上面发布的 jsfiddle 中对此进行了测试。换行：

$(this).replaceWith( text );

和

document.getElementById(this).innerHTML = text;

我尝试使用 jQuery .html() 命令，它没有删除绑定，但它确实将文本光标移动到行首。

更新：在 Chrome 29、Firefox 24 和 IE9 中测试。效果很好。

于 2013-10-04T03:01:47.653 回答