Question

如果用户在有问题的div中将wordx放在wordx之前，例如somthingwordx，因为新添加的文字＆＃34; soemthing＆＃34;没有自动包装到任何现有的跨度中，我如何知道用户添加文本到哪个跨度并使用javascript将其包装到该跨度？

演示：

{{1}}

Answer 1

我现在已经为您正在使用的解决方案更新了代码。在这里查看片段或小提琴：https://jsfiddle.net/4xcxLt34/2/

希望它会有所帮助！

＆＃13;

$(document).ready(function(){
  $('span').on('DOMSubtreeModified', function() {
    $('#result > p').text($(this).attr('id'));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputbox" style="border:1px solid lightgrey" contenteditable="true">
  <span id="1"> word1</span>
  <span id="2"> word2</span>
  <span id="3"> word3</span>
  <span id="4"> word4</span>
  <span id="5"> word5</span>
  <span id="6"> word6</span>
  <span id="7"> word7</span>
  <span id="8"> word8</span>
  <span id="9"> word9</span>
  <span id="10"> word10</span>
  <span id="11"> word11</span>
  <span id="12"> word12</span>
</div>
<div id='result'>
  <h3>
  This is the span that is changed:
  </h3>
  <p>

  </p>
</div>

＆＃13;

如何将新输入的文本包装到以下已存在的span标记中

1 个答案: