Question

0

99

Views

Insert text in editable div when another div is clicked

I have an editable div and I want to insert some text when another div is clicked, using document.execCommand. When I use a button, it works properly, but it doesn't work when a clickable div is used.

<!-- When I click this, it works -->
<button on:click={e => document.execCommand("insertText", false, "Some text")}>Inser text</button>

<!-- When I click this, it doesn't -->
<div on:click={e => document.execCommand("insertText", false, "Some text")}>Inser text</div>

<div contenteditable="true" />

I suspect it's a focus issue. I have tried calling e.preventDefault() but it doesn't work either.

It's not relevant but I'm using Svelte.

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T21:22:02.071Z

I found a solution in this post.

Basically, mousedown event should be used, instead of click.

In my case, it looks like this:

<div on:mousedown={e => {
  e.preventDefault();
  document.execCommand("insertText", false, "Some text");
}>Inser text</div>

0

99

Insert text in editable div when another div is clicked

1 answers

0

Find remote jobs

Andres GPT