execCommand does not work with a div as a event listener

Question

I been looking all over on google and I cant seem to find a working solution for this situation. I basically want to use a div call trigger to successfully execute document.execCommand(); but I notice that document.execCommand() don't work with a

div as a event listener and I know this works with a button tag but I don't want to use a button with this so how can I get this working with a div and I know one of you guys will say, you know you don't need to use document.execCommand to do something like this

and I am aware of that but for personal reasons I need to do this with a div with document.execCommand.

My code

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>

Just like the post said I need to find a way to get this to work with document.execCommand() with a div I know there is other ways to do this but I need to do this. This way and ok take your time. I appreciate your help. :) — , Mar 04 '19 at 18:27
To be clear, are you eventually hoping for the user to select text and click to underline? — Bibberty, Mar 04 '19 at 18:33
Yeah basically the process would go like this. Text highlight the word Adam first and then press the red div to underline the word Adam. — , Mar 04 '19 at 18:39
Example that works -> [codepen](https://codepen.io/chrisdavidmills/pen/gzYjag) — James, Mar 04 '19 at 18:51
Thanks for your response @James but are you able to give a code example based on my code? I look at that already and that seem confusing to break down and i'm trying to avoid using onclick and I need to use a event listener if you don't know how that's ok. I'm just glad that you also tried to help me out as well. — , Mar 04 '19 at 19:07
So here is the issue. The command works against the `selection`. When you trigger the command from a button, it does not cancel the `selection`. and indeed, changing your trigger to a `button` and it works. So you would need to record a selected range, and then re-apply that as part of the function. — Bibberty, Mar 04 '19 at 19:25

score 0 · Accepted Answer · 2019-03-04T23:01:52.880

This code should make it work try this out.

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>

I took ideas from this post and I converted this method into a event listener version for your situation.

execCommand does not work with a div as a event listener

1 Answers1