CODEWITHSUNDEEP
javascriptjqueryhtml
Maggie S.
Maggie S.

Reputation: 1136

contentEditable attr set to true makes links in content unclickable

I have a div with output content that sometimes outputs links. But when this output div has the contentEditable attribute set to true if makes the links unclickable.

What's odd is you can still hover over it and before trying to click it it still looks and behaves like a link. (Blue in color, underlined, hover changes the color of blue, etc.)

But when you go to click it it doesn't take you to the link. I can right click and say open or open in a new window and it works fine.

Is there a way to make it clickable again so the user doesn't have to right click it all the time?

<div contentEditable='true'> 
    Some content with link: <a href='https://google.com' target='_blank'>Google</a>
</div>

Here is a JSFiddle example: https://jsfiddle.net/ce13w610/

I still need the content to remain editable, but it would be nice to have the links working intuitively again.

Edit: put additional solution as an answer, not an edit. :)

Upvotes: 2

Views: 719

Answers (3)

AAB
AAB

Reputation: 1653

Here's an another one may be overkill though:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content" contentEditable="true">
  <a href="http://www.google.com" target="_blank">Click Me!</a>
</div>
<script>
  $('#content a').mouseenter(function() {
    console.log("Works");
    $('#content').attr("contentEditable", "false");
  });
  $('#content a').mouseleave(function() {
    $('#content').attr("contentEditable", "true");
  });
</script>

https://jsfiddle.net/9dk4sgkk/

Upvotes: 1

Maggie S.
Maggie S.

Reputation: 1136

Additional solution:

I went and used jQuery to make all tags in the output div to have the attribute contentEditable = false.

$("#content-output a[href]").attr('contentEditable', 'false');

Upvotes: 0

taxicala
taxicala

Reputation: 21759

you have to make the link uneditable:

<div class='content-output' contentEditable='true'>
    My content and link here: <a contentEditable='false' href='https://www.youtube.com/watch?v=dQw4w9WgXcQ' target='_blank'>Some video</a>
</div>

https://jsfiddle.net/ce13w610/1/

Upvotes: 3

Related Questions