主页 / 问题 / 947491
Accepted
OPTIMUS PRIME
Asked:2020-02-21 16:34:52 +0000 UTC2020-02-21 16:34:52 +0000 UTC

Textarea 和 Contenteditable - 有什么区别？为什么 selectionStart 和 selectionEnd 不适用于第二个？

  • 772

我正在尝试制作个人 HTML 编辑器。使用 textarea 一切正常： ( CodePen-1 )
如果未选择任何内容 - 仅在键入文本的末尾添加标签。如果您选择文本 - 当您单击按钮时，文本将放置在标签内。

<button title="division" class="tag" onclick="tag('<div>','</div>');">div</button>
<textarea id="form"></textarea>

JS：

function tag(a,b){
  var x = document.getElementById('form');
  x.focus();  
      var value = $("#form").val();
      var start=x.selectionStart;
      var end=x.selectionEnd;
      var selected = a + value.substr(start,end-start) + b;
  $("#form").val(  value.substr(0,start) + selected + value.substr(end)  );
}

但是 Textarea 的内部不能以任何方式着色或突出显示，因此需要制作一个可编辑的 div，其中已经可以突出显示关键字或标签。但是 selectionStart 和 selectionEnd 在这里不起作用（CodePen-2）：

<button title="division" class="tag" onclick="tag('<div>','</div>');">div</button>
<div id="form" contenteditable="true"></div>

JS：

function tag(a,b){
         var x = document.getElementById('form');
             var value = $("#form").text();
             var start = x.selectionStart;
             var end = x.selectionEnd;
                 var selected = a + value.substr(start,end-start) + b;
   $('#form').text(  value.substr(0,start) + selected + value.substr(end)  );
   x.focus();
}

戳方法不起作用，目前尚不清楚我做错了什么。看来你只需要知道...

javascript

1 个回答

  1. Best Answer

    selectionStartand属性直接在andselectionEnd元素上声明。HTMLTextAreaElementHTMLInputElement

    因为在这种情况下contenteditable元素是div- 它没有这些属性。

    要获取选定的文本，可以使用函数getSelection

    function tag(a, b) {
  var x = document.getElementById('form');
  var value = $("#form").text();
  var selection = window.getSelection().getRangeAt(0);
  var start = selection.startOffset;
  var end = selection.endOffset;
  var selected = a + value.substr(start, end - start) + b;
  $('#form').text(value.substr(0, start) + selected + value.substr(end));
  x.focus();
}
    .tag {
  width: 90px;
  border: 3px solid #800;
  color: #800;
  background-color: white;
  margin: 0 0 10px 0;
  padding: 5px;
}

#form {
  width: 800px;
  height: 150px;
  background: rgb(255, 222, 159);
  font-size: 18px;
  border: 2px solid #800
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button title="division" class="tag" onclick="tag('<div>','</div>');">div</button>
<br>
<div id="form" contenteditable="true"></div>

    • 4

相关问题