主页 / 问题 / 1352910
Accepted
Evil Giraffe
Asked:2022-04-23 05:10:55 +0000 UTC2022-04-23 05:10:55 +0000 UTC

HTML 中 CTRL + V 的问题

  • 772

我有一个带有contenteditable选项的<div> 。 使用+将具有来自其他环境的视觉效果的文本插入其中，这看起来很丑陋且不切实际：
ctrlv

插入前

粘贴后

如何解决此问题并仅粘贴文本，而不粘贴其他所有内容？

Ps 请不要给我写关于ctrl++的文章，shift因为 v我想自动、直观地做所有事情

javascript

2 个回答

  1. Best Answer

    这不是一个真正的问题，而是一个属性特性contenteditable。

    有这样一个选项：

    document.querySelector('.clear[contenteditable]').addEventListener('paste', (e) => {
  e.preventDefault();
  const text = (e.originalEvent || e).clipboardData.getData('text/plain');
  window.document.execCommand('insertText', false, text);
});
    div[contenteditable] {
  padding: 20px;
  background: #f5f5f5;
  margin-bottom: 10px;
}
    <div class="clear" contenteditable="true">Тут только обычный текст</div>

    • 2

  2. UPD：在评论中对应之后，我决定返工劣质版本

    let edit = document.getElementById('edit');

String.prototype.splice = function(idx, rem, str) {
  return this.slice(0, idx) + str + this.slice(idx + Math.abs(rem));
};

edit.addEventListener('paste', paste);

function paste(e) {
  let buf, data;
  e.stopPropagation();
  e.preventDefault();
  buf = e.clipboardData || window.clipboardData;
  data = buf.getData('Text');
  let startIdx = getStartIdx(edit);
  let endIdx = window.getSelection().toString().length;
  edit.innerText = edit.innerText.splice(startIdx, endIdx, data);  
}

function getStartIdx(el) {
  let start = 0;
  let sel, rng, rngTxt;
  if (typeof window.getSelection != "undefined") {
      rng = window.getSelection().getRangeAt(0);
      rngTxt = rng.cloneRange();
      rngTxt.selectNodeContents(el);
      rngTxt.setEnd(rng.startContainer, rng.startOffset);
      start = rngTxt.toString().length;
  } else if (typeof document.selection != "undefined" &&
          document.selection.type != "Control") {
      sel = document.selection
      rng = sel.createRange();
      rngTxt = document.body.createTextRange();
      rngTxt.moveToElementText(el);
      rngTxt.setEndPoint("EndToStart", rng);
      start = rngTxt.text.length;
  }
  return start
}

//execCommand устарел данная функция используется исключительно для удобства копирования в примере
function copyContent (event) {  
  let div = document.getElementById("style");
  let range = document.createRange();
  range.selectNode(div.childNodes[0]); 
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);      
  document.execCommand('copy');  
  window.getSelection().removeAllRanges();
  div.innerText="Ok";
  setTimeout(()=>{div.innerText="copy"}, 500);
}
document.getElementById('style').addEventListener('click', copyContent);
    #style{
  background:red; 
  width:50px; 
  margin: 0 auto; 
  text-align: center;
  cursor: pointer;
}
#edit{
  border: solid 1px black
}
    <div id='edit' contenteditable='true'>Paste</div>
<div id="style">copy</div>

    • 1

相关问题