Question

我一直在Google各处搜索，似乎无法找到这种情况的可行解决方案。我基本上想使用div调用触发器来成功执行document.execCommand（）;但我注意到document.execCommand（）不能与

一起使用

div作为事件侦听器，我知道它可以与button标记一起使用，但是我不想与此一起使用按钮，所以我如何使它与div一起使用，我知道你们中的一个会说，你知道您不需要使用document.execCommand做类似的事情

我知道这一点，但是出于个人原因，我需要使用带有document.execCommand的div来完成此操作。

我的代码

document.querySelector('#trigger').addEventListener('click',underline);

function underline(){
  
  document.execCommand('underline', false, '');
  
}

#trigger{
  background-color: red;
  height: 50px;
  width: 100px;
  color: white;
  position: relative;
  border-radius: 8px;
  cursor: pointer;
  display: block;
}

<div id='trigger'></div><!--</trigger>-->

<p>Text highlight the word Adam and press the red trigger to add a underline to Adam.</p>

<p contenteditable='true'>Adam</p>

Answer 1

此代码应该可以使其正常工作。

document.querySelector("#trigger").addEventListener('mousedown',function(event){event.preventDefault();});
document.querySelector('#trigger').addEventListener('click',underline);

function underline(){
  
  document.execCommand('underline', false, '');
  
}

#trigger{
  background-color: red;
  height: 50px;
  width: 100px;
  color: white;
  position: relative;
  border-radius: 8px;
  cursor: pointer;
  display: block;
}

<div id='trigger'></div><!--</trigger>-->

<p>Text highlight the word Adam and press the red trigger to add a underline to Adam.</p>

<p contenteditable='true'>Adam</p>

我从post中汲取了一些想法，并将此方法转换为适合您情况的事件侦听器版本。

execCommand不适用于div作为事件监听器

1 个答案: