css 粘贴到div，不接受文本输入

wwtsj6pe 于 2024-01-09 发布在其他

关注(0)|答案(2)|浏览(139)

我的问题是在某些方面类似于this post，这篇文章似乎非常有限相比，我想做什么.我玩的想法有一个div，模仿内容可编辑，但更好.用户将能够添加各种格式的文本，样式，字体，等.甚至包括图像，视频，它只不过是一个想法（所以不要太看重它的实用性）。
简而言之，我有一个如下所示的div

<div tabindex="0" id="canvas">       
          <i id="canvas-cursor">&nbsp</i>
        </div>

字符串
JavaScript有这个

let canvas = document.getElementById("canvas");
let cursor = document.getElementById("canvas-cursor"); 

canvas.addEventListener("keydown", editText);

const removeAttributes = (element) => {
  for (let i = 0; i < element.attributes.length; i++) {
    element.removeAttribute(element.attributes[i].name);
  }
};
function editText(event) {  
  event.preventDefault;
  const keyName = event.key;
  
  if (keyName === "Control") {
    console.log(`Control key ${keyName}`);
    return;
  } 

  if (event.ctrlKey) {
    console.log(`Combination of ctrlKey ${keyName}`);
  } else {

    let newElement = document.createElement("span");
    newElement.setAttribute("class", "canvas-child");
    
    switch (keyName){
    case " ":
      newElement.innerHTML = "&nbsp"; 
      break;
    case "ArrowLeft":
      return;
    case "ArrowRight":
      return;
    case "Backspace":
      var deleted = canvas.removeChild(cursor.previousElementSibling);
      removeAttributes(deleted);
      return;
    case "ArrowUp":
      return; 
    case "ArrowDown":
      return
    case "Enter":
      newElement.innerText += "\n"
      break;
    case "Shift": 
    case "Alt":
      console.log("Alt button is pressed.");
    case "Tab":
    case "Meta":
    case "CapsLock":
      return;
 
    default:
      newElement.innerText += keyName
      break;        
    }
    
    newElement.addEventListener("mouseenter", (event)=> {
      // newElement.style.background = "green";
    });

    newElement.addEventListener("mouseleave", (event)=> {
      newElement.style.background = "none";
    });

    newElement.addEventListener("dblclick", (event) => {
      console.log("On click event: " + event
                  + "\nsource: " + newElement);
      canvas.insertBefore(cursor, newElement);
    });

    canvas.insertBefore(newElement, cursor); 
  }
}

型
和css

#canvas-cursor {
    background-color: red;
    animation: blinker 1s linear infinite;
}

型
为了简单起见，删除了文本导航和字体样式/格式，但效果很好;用户可以选择代码样式、下划线、粗体、字体样式、高亮等。
接下来我想处理的两个事件是复制和粘贴。我知道如果我添加contenteditable="true"属性，我可以很容易地启用该功能，但是，这也需要键盘输入并用文本填充div;这意味着用户键入的所有内容都将重复;我不想要这个，因为我已经在处理这个了。我只关心捕获粘贴事件并根据我的突发奇想处理它。有没有办法做到这一点？
先谢谢你了。

css

来源：https://stackoverflow.com/questions/77762737/paste-to-div-without-accepting-text-input

2条答案

按热度按时间

mspsb9vt1#

理想情况下，我希望在右键单击div时出现粘贴选项，但此事件侦听器适用于组合Ctl-v，这是一种我可以接受的方法。

function onPaste(e){
  e.preventDefault();
  
  let data = (e.clipboardData || window.clipboardData);

  let dataElement = data.getData("text/plain"); 
  for(const dataType of data.types){ // or if you want to iterate 
                                     // through the types

  }
}
canvas.addEventListener("paste", onPaste);

字符串
this link进入使用系统剪贴板，这可以是另一个可接受的解决方案，为一些我假设。

赞(0）回复(0）举报 2024-01-09

rks48beu2#

我猜你想复制和粘贴在div中，我修改了你的js代码

let canvas = document.getElementById("canvas");
let cursor = document.getElementById("canvas-cursor");
canvas.addEventListener("keydown", editText);
const removeAttributes = (element) => {
  for (let i = 0; i < element.attributes.length; i++) {
    element.removeAttribute(element.attributes[i].name);
  }
};
async function editText(event) {
  event.preventDefault;
  const keyName = event.key;
  if (keyName === "Control") {
    console.log(`Control key ${keyName}`);
    return;
  }
  let newElement = document.createElement("span");
  newElement.setAttribute("class", "canvas-child");
  if (event.ctrlKey) {
    console.log(`Combination of ctrlKey ${keyName}`);
    if (keyName === 'v') {
      try {
        const clipboardItems = await navigator.clipboard.readText();
        if (!clipboardItems) return
        newElement.innerText += clipboardItems
      } catch (err) {
        console.error(err.name, err.message);
      }
    }
  } else {
    switch (keyName) {
      case " ":
        newElement.innerHTML = "&nbsp";
        break;
      case "ArrowLeft":
        return;
      case "ArrowRight":
        return;
      case "Backspace":
        var deleted = canvas.removeChild(cursor.previousElementSibling);
        removeAttributes(deleted);
        return;
      case "ArrowUp":
        return;
      case "ArrowDown":
        return
      case "Enter":
        newElement.innerText += "\n"
        break;
      case "Shift":
      case "Alt":
        console.log("Alt button is pressed.");
      case "Tab":
      case "Meta":
      case "CapsLock":
        return;
      default:
        newElement.innerText += keyName
        break;
    }

  }
  newElement.addEventListener("mouseenter", (event) => {
    // newElement.style.background = "green";
  });

  newElement.addEventListener("mouseleave", (event) => {
    newElement.style.background = "none";
  });

  newElement.addEventListener("dblclick", (event) => {
    console.log("On click event: " + event +
      "\nsource: " + newElement);
    canvas.insertBefore(cursor, newElement);
  });

  canvas.insertBefore(newElement, cursor);
}

字符串

赞(0）回复(0）举报 2024-01-09

我来回答

css 粘贴到div，不接受文本输入

2条答案

相关问题

热门标签

最新问答