JQuery button click causes focus loss on highlighted text in editable div

Question

I have a div which is editable and I am trying to format the text using buttons/anchors to trigger JQuery actions. The problem is that If I have a selected text inside the editable div and then if I click on #bold button to make it bold. The text loses focus and nothing happens to it.

HTML

<div class="poster">
    <div class="editor" contenteditable="true" placeholder="What's on your mind?"></div>

    <div class="posterButtons preventCollapse">
        <div class="pull-left">
            <a id="bold">B</a>
            <a id="italic">I</a>
            <a id="underline">U</a>
        </div>
        <div class="pull-right">
            <a class="submitPost">Post</a>
        </div>
    </div>
</div>

JQuery

$('#bold').click(function(){
    document.execCommand('bold', false);
});

Possible duplicate of [contenteditable .execCommand() not firing?](https://stackoverflow.com/questions/21546993/contenteditable-execcommand-not-firing) — jmargolisvt, Dec 29 '18 at 22:54
@Mohamed-Yousef post that as an answer. It works! and pls explain why it works — Feelsbadman, Dec 29 '18 at 23:02

Mohamed-Yousef · Accepted Answer · 2018-12-29T23:17:29.523

you can use <button> instead of <a>

$('#bold').click(function(){
    document.execCommand('bold', false);
});

.editor {

    height: 100px;
    border: 1px solid #ddd;
    padding: 10px;
    outline: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="poster">
    <div class="editor" contenteditable="true" placeholder="What's on your mind?"></div>

    <div class="posterButtons preventCollapse">
        <div class="pull-left">
            <button type="button" id="bold">B</button>
            <button type="button" id="italic">I</button>
            <button type="button" id="underline">U</button>
        </div>
        <div class="pull-right">
            <a class="submitPost">Post</a>
        </div>
    </div>
</div>

you can read Why getting a text selection from textarea works when a button clicked but not when a "div" clicked (in Internet Explorer)

Would you please explain why button works and anchor doesn't? — Feelsbadman, Dec 29 '18 at 23:06
@Feelsbadman I added a link which explain the idea of using `button` .. To be honest its not explain the concept well .. but this is what I have .. Have a great day :-) — Mohamed-Yousef, Dec 29 '18 at 23:20

score 1 · Answer 2 · answered Dec 30 '18 at 00:46

1

Please use <button type="button" id="bold">B</button> instead of <a id="bold">B</a>. Only use <a> tag if you have to redirect or something like that.

Also, if you are using a button as a submit button try to use <button type="submit" id="bold">B</button>. The difference is button type is just a button or submit button.

answered Dec 30 '18 at 00:46

Sushil

1,111
1
10
23

It'd be great if you could explain the behaviour of a button vs an anchor. That would explain why button **works** and anchor doesn't. – Feelsbadman Dec 30 '18 at 01:08
@Feelsbadman Basically anchor tag `` element represents a hyperlink to a destination page or a section within a page. Wherever the` – Sushil Dec 30 '18 at 01:33

JQuery button click causes focus loss on highlighted text in editable div

HTML

JQuery

2 Answers2