Contenteditable div - How the button click event differs from other elements click events?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
1
I am trying to insert text at the current cursor position in the content editable div by clicking on some other element . This works perfect if I click on button , but not working with any other element . I mean for the button it is inserting at the cursor position , but for any other element clicks it is always adding the starting position of the div . Below is an example which includes Button click and DIV click( It is not working for any other tag ) . Is there any difference between these two clicks ? How can I make DIV click exactly like a button click . Please note I am not using JQUERY ( But if there is any solution with VUEJS I am fine ) . Thank You .
Here is the jsfiddle link http://jsfiddle.net/jwvha/2727/
function insertTextAtCursor(text)
document.getElementById('pre').focus();
var sel, range, html;
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
body
background-color: #CCC;
div
border: 1px #000 solid;
background-color: #FFF;
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
vertical-align: center;
padding: 30px;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
</head>
<body>
<div contenteditable id="pre">
Update text Here . This is contenteditable div
</div>
<div>
<input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above"> ( This button inserts text at the cursors current positions)
</div>
<div onClick="insertTextAtCursor('TEXT')">
<b>Click here to insert in the above contenteditable div </b> ( This won't insert at the current position , but always at the position 1)
</div>
</body>
</html>javascript html css vue.js
asked Nov 14 '18 at 1:23
BujjiBujji
92373457
add a comment |
1
I am trying to insert text at the current cursor position in the content editable div by clicking on some other element . This works perfect if I click on button , but not working with any other element . I mean for the button it is inserting at the cursor position , but for any other element clicks it is always adding the starting position of the div . Below is an example which includes Button click and DIV click( It is not working for any other tag ) . Is there any difference between these two clicks ? How can I make DIV click exactly like a button click . Please note I am not using JQUERY ( But if there is any solution with VUEJS I am fine ) . Thank You .
Here is the jsfiddle link http://jsfiddle.net/jwvha/2727/
function insertTextAtCursor(text)
document.getElementById('pre').focus();
var sel, range, html;
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
body
background-color: #CCC;
div
border: 1px #000 solid;
background-color: #FFF;
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
vertical-align: center;
padding: 30px;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
</head>
<body>
<div contenteditable id="pre">
Update text Here . This is contenteditable div
</div>
<div>
<input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above"> ( This button inserts text at the cursors current positions)
</div>
<div onClick="insertTextAtCursor('TEXT')">
<b>Click here to insert in the above contenteditable div </b> ( This won't insert at the current position , but always at the position 1)
</div>
</body>
</html>javascript html css vue.js
asked Nov 14 '18 at 1:23
BujjiBujji
92373457
add a comment |
1
1
1
I am trying to insert text at the current cursor position in the content editable div by clicking on some other element . This works perfect if I click on button , but not working with any other element . I mean for the button it is inserting at the cursor position , but for any other element clicks it is always adding the starting position of the div . Below is an example which includes Button click and DIV click( It is not working for any other tag ) . Is there any difference between these two clicks ? How can I make DIV click exactly like a button click . Please note I am not using JQUERY ( But if there is any solution with VUEJS I am fine ) . Thank You .
Here is the jsfiddle link http://jsfiddle.net/jwvha/2727/
function insertTextAtCursor(text)
document.getElementById('pre').focus();
var sel, range, html;
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
body
background-color: #CCC;
div
border: 1px #000 solid;
background-color: #FFF;
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
vertical-align: center;
padding: 30px;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
</head>
<body>
<div contenteditable id="pre">
Update text Here . This is contenteditable div
</div>
<div>
<input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above"> ( This button inserts text at the cursors current positions)
</div>
<div onClick="insertTextAtCursor('TEXT')">
<b>Click here to insert in the above contenteditable div </b> ( This won't insert at the current position , but always at the position 1)
</div>
</body>
</html>javascript html css vue.js
asked Nov 14 '18 at 1:23
BujjiBujji
92373457
I am trying to insert text at the current cursor position in the content editable div by clicking on some other element . This works perfect if I click on button , but not working with any other element . I mean for the button it is inserting at the cursor position , but for any other element clicks it is always adding the starting position of the div . Below is an example which includes Button click and DIV click( It is not working for any other tag ) . Is there any difference between these two clicks ? How can I make DIV click exactly like a button click . Please note I am not using JQUERY ( But if there is any solution with VUEJS I am fine ) . Thank You .
Here is the jsfiddle link http://jsfiddle.net/jwvha/2727/
function insertTextAtCursor(text)
document.getElementById('pre').focus();
var sel, range, html;
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
body
background-color: #CCC;
div
border: 1px #000 solid;
background-color: #FFF;
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
vertical-align: center;
padding: 30px;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
</head>
<body>
<div contenteditable id="pre">
Update text Here . This is contenteditable div
</div>
<div>
<input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above"> ( This button inserts text at the cursors current positions)
</div>
<div onClick="insertTextAtCursor('TEXT')">
<b>Click here to insert in the above contenteditable div </b> ( This won't insert at the current position , but always at the position 1)
</div>
</body>
</html>function insertTextAtCursor(text)
document.getElementById('pre').focus();
var sel, range, html;
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
body
background-color: #CCC;
div
border: 1px #000 solid;
background-color: #FFF;
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
vertical-align: center;
padding: 30px;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
</head>
<body>
<div contenteditable id="pre">
Update text Here . This is contenteditable div
</div>
<div>
<input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above"> ( This button inserts text at the cursors current positions)
</div>
<div onClick="insertTextAtCursor('TEXT')">
<b>Click here to insert in the above contenteditable div </b> ( This won't insert at the current position , but always at the position 1)
</div>
</body>
</html>function insertTextAtCursor(text)
document.getElementById('pre').focus();
var sel, range, html;
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
body
background-color: #CCC;
div
border: 1px #000 solid;
background-color: #FFF;
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
vertical-align: center;
padding: 30px;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
</head>
<body>
<div contenteditable id="pre">
Update text Here . This is contenteditable div
</div>
<div>
<input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above"> ( This button inserts text at the cursors current positions)
</div>
<div onClick="insertTextAtCursor('TEXT')">
<b>Click here to insert in the above contenteditable div </b> ( This won't insert at the current position , but always at the position 1)
</div>
</body>
</html>javascript html css vue.js
javascript html css vue.js
asked Nov 14 '18 at 1:23
BujjiBujji
92373457
asked Nov 14 '18 at 1:23
BujjiBujji
92373457
edited Nov 14 '18 at 1:31
Bujji
asked Nov 14 '18 at 1:23
BujjiBujji
92373457
asked Nov 14 '18 at 1:23
BujjiBujji
92373457
asked Nov 14 '18 at 1:23
BujjiBujji
92373457
92373457
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
Buttons do not gain focus on click unlike many other elements. As you are relying on focus in your function, after a successful click event (which consists of mouseup + mousedown) that bubbles up the DOM tree, your focus is being set on the div first. You can avoid this by either listening to mousedown events and calling event.preventDefault() or simply trigger your function before click is fired, i.e. onmousedown.
Here is an answer to another post that explains everything pretty well.
var prevented = document.getElementById("prevented");
prevented.addEventListener('mousedown', event => event.preventDefault());
function insertTextAtCursor(text)
document.getElementById('pre').focus();
var sel, range, html;
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
body
background-color: #CCC;
div
border: 1px #000 solid;
background-color: #FFF;
width: 500px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
vertical-align: center;
padding: 30px;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
</head>
<body>
<div contenteditable id="pre">
Update text Here . This is contenteditable div
</div>
<div>
<input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above"> ( This button inserts text at the cursors current positions)
</div>
<div onClick="insertTextAtCursor('TEXT')" id="prevented">
<b>Click here to insert in the above contenteditable div </b> ( This won't insert at the current position , but always at the position 1)
</div>
</body>
</html>answered Nov 14 '18 at 2:12
mkrlmkrl
517417
But this doesn't solve the problem, it just sets it ONCE before losing focus.
– Sherif Salah
Nov 14 '18 at 2:16
I was just giving a basic idea of the root of the problem. I've updated my answer with a basic event listener.
– mkrl
Nov 14 '18 at 2:31
excellent solution.
– Sherif Salah
Nov 14 '18 at 2:33
Thank You for your answer and the solution . This is really helpful . I have to check if this can be implemented for emoji-mart-vue . Thanks again
– Bujji
Nov 14 '18 at 10:36
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291859%2fcontenteditable-div-how-the-button-click-event-differs-from-other-elements-cli%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Buttons do not gain focus on click unlike many other elements. As you are relying on focus in your function, after a successful click event (which consists of mouseup + mousedown) that bubbles up the DOM tree, your focus is being set on the div first. You can avoid this by either listening to mousedown events and calling event.preventDefault() or simply trigger your function before click is fired, i.e. onmousedown.
Here is an answer to another post that explains everything pretty well.
var prevented = document.getElementById("prevented");
prevented.addEventListener('mousedown', event => event.preventDefault());
function insertTextAtCursor(text)
document.getElementById('pre').focus();
var sel, range, html;
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
body
background-color: #CCC;
div
border: 1px #000 solid;
background-color: #FFF;
width: 500px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
vertical-align: center;
padding: 30px;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
</head>
<body>
<div contenteditable id="pre">
Update text Here . This is contenteditable div
</div>
<div>
<input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above"> ( This button inserts text at the cursors current positions)
</div>
<div onClick="insertTextAtCursor('TEXT')" id="prevented">
<b>Click here to insert in the above contenteditable div </b> ( This won't insert at the current position , but always at the position 1)
</div>
</body>
</html>answered Nov 14 '18 at 2:12
mkrlmkrl
517417
But this doesn't solve the problem, it just sets it ONCE before losing focus.
– Sherif Salah
Nov 14 '18 at 2:16
I was just giving a basic idea of the root of the problem. I've updated my answer with a basic event listener.
– mkrl
Nov 14 '18 at 2:31
excellent solution.
– Sherif Salah
Nov 14 '18 at 2:33
Thank You for your answer and the solution . This is really helpful . I have to check if this can be implemented for emoji-mart-vue . Thanks again
– Bujji
Nov 14 '18 at 10:36
add a comment |
2
Buttons do not gain focus on click unlike many other elements. As you are relying on focus in your function, after a successful click event (which consists of mouseup + mousedown) that bubbles up the DOM tree, your focus is being set on the div first. You can avoid this by either listening to mousedown events and calling event.preventDefault() or simply trigger your function before click is fired, i.e. onmousedown.
Here is an answer to another post that explains everything pretty well.
var prevented = document.getElementById("prevented");
prevented.addEventListener('mousedown', event => event.preventDefault());
function insertTextAtCursor(text)
document.getElementById('pre').focus();
var sel, range, html;
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
body
background-color: #CCC;
div
border: 1px #000 solid;
background-color: #FFF;
width: 500px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
vertical-align: center;
padding: 30px;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
</head>
<body>
<div contenteditable id="pre">
Update text Here . This is contenteditable div
</div>
<div>
<input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above"> ( This button inserts text at the cursors current positions)
</div>
<div onClick="insertTextAtCursor('TEXT')" id="prevented">
<b>Click here to insert in the above contenteditable div </b> ( This won't insert at the current position , but always at the position 1)
</div>
</body>
</html>answered Nov 14 '18 at 2:12
mkrlmkrl
517417
But this doesn't solve the problem, it just sets it ONCE before losing focus.
– Sherif Salah
Nov 14 '18 at 2:16
I was just giving a basic idea of the root of the problem. I've updated my answer with a basic event listener.
– mkrl
Nov 14 '18 at 2:31
excellent solution.
– Sherif Salah
Nov 14 '18 at 2:33
Thank You for your answer and the solution . This is really helpful . I have to check if this can be implemented for emoji-mart-vue . Thanks again
– Bujji
Nov 14 '18 at 10:36
add a comment |
2
2
2
Buttons do not gain focus on click unlike many other elements. As you are relying on focus in your function, after a successful click event (which consists of mouseup + mousedown) that bubbles up the DOM tree, your focus is being set on the div first. You can avoid this by either listening to mousedown events and calling event.preventDefault() or simply trigger your function before click is fired, i.e. onmousedown.
Here is an answer to another post that explains everything pretty well.
var prevented = document.getElementById("prevented");
prevented.addEventListener('mousedown', event => event.preventDefault());
function insertTextAtCursor(text)
document.getElementById('pre').focus();
var sel, range, html;
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
body
background-color: #CCC;
div
border: 1px #000 solid;
background-color: #FFF;
width: 500px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
vertical-align: center;
padding: 30px;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
</head>
<body>
<div contenteditable id="pre">
Update text Here . This is contenteditable div
</div>
<div>
<input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above"> ( This button inserts text at the cursors current positions)
</div>
<div onClick="insertTextAtCursor('TEXT')" id="prevented">
<b>Click here to insert in the above contenteditable div </b> ( This won't insert at the current position , but always at the position 1)
</div>
</body>
</html>answered Nov 14 '18 at 2:12
mkrlmkrl
517417
Buttons do not gain focus on click unlike many other elements. As you are relying on focus in your function, after a successful click event (which consists of mouseup + mousedown) that bubbles up the DOM tree, your focus is being set on the div first. You can avoid this by either listening to mousedown events and calling event.preventDefault() or simply trigger your function before click is fired, i.e. onmousedown.
Here is an answer to another post that explains everything pretty well.
var prevented = document.getElementById("prevented");
prevented.addEventListener('mousedown', event => event.preventDefault());
function insertTextAtCursor(text)
document.getElementById('pre').focus();
var sel, range, html;
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
body
background-color: #CCC;
div
border: 1px #000 solid;
background-color: #FFF;
width: 500px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
vertical-align: center;
padding: 30px;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
</head>
<body>
<div contenteditable id="pre">
Update text Here . This is contenteditable div
</div>
<div>
<input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above"> ( This button inserts text at the cursors current positions)
</div>
<div onClick="insertTextAtCursor('TEXT')" id="prevented">
<b>Click here to insert in the above contenteditable div </b> ( This won't insert at the current position , but always at the position 1)
</div>
</body>
</html>var prevented = document.getElementById("prevented");
prevented.addEventListener('mousedown', event => event.preventDefault());
function insertTextAtCursor(text)
document.getElementById('pre').focus();
var sel, range, html;
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
body
background-color: #CCC;
div
border: 1px #000 solid;
background-color: #FFF;
width: 500px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
vertical-align: center;
padding: 30px;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
</head>
<body>
<div contenteditable id="pre">
Update text Here . This is contenteditable div
</div>
<div>
<input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above"> ( This button inserts text at the cursors current positions)
</div>
<div onClick="insertTextAtCursor('TEXT')" id="prevented">
<b>Click here to insert in the above contenteditable div </b> ( This won't insert at the current position , but always at the position 1)
</div>
</body>
</html>var prevented = document.getElementById("prevented");
prevented.addEventListener('mousedown', event => event.preventDefault());
function insertTextAtCursor(text)
document.getElementById('pre').focus();
var sel, range, html;
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.setStartAfter(textNode);
sel.removeAllRanges();
sel.addRange(range);
body
background-color: #CCC;
div
border: 1px #000 solid;
background-color: #FFF;
width: 500px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
vertical-align: center;
padding: 30px;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Editor</title>
</head>
<body>
<div contenteditable id="pre">
Update text Here . This is contenteditable div
</div>
<div>
<input type="button" onClick="insertTextAtCursor('TEXT')" value="Click here to insert text above"> ( This button inserts text at the cursors current positions)
</div>
<div onClick="insertTextAtCursor('TEXT')" id="prevented">
<b>Click here to insert in the above contenteditable div </b> ( This won't insert at the current position , but always at the position 1)
</div>
</body>
</html>answered Nov 14 '18 at 2:12
mkrlmkrl
517417
edited Nov 14 '18 at 2:36
answered Nov 14 '18 at 2:12
mkrlmkrl
517417
answered Nov 14 '18 at 2:12
mkrlmkrl
517417
answered Nov 14 '18 at 2:12
mkrlmkrl
517417
517417
But this doesn't solve the problem, it just sets it ONCE before losing focus.
– Sherif Salah
Nov 14 '18 at 2:16
I was just giving a basic idea of the root of the problem. I've updated my answer with a basic event listener.
– mkrl
Nov 14 '18 at 2:31
excellent solution.
– Sherif Salah
Nov 14 '18 at 2:33
Thank You for your answer and the solution . This is really helpful . I have to check if this can be implemented for emoji-mart-vue . Thanks again
– Bujji
Nov 14 '18 at 10:36
add a comment |
But this doesn't solve the problem, it just sets it ONCE before losing focus.
– Sherif Salah
Nov 14 '18 at 2:16
I was just giving a basic idea of the root of the problem. I've updated my answer with a basic event listener.
– mkrl
Nov 14 '18 at 2:31
excellent solution.
– Sherif Salah
Nov 14 '18 at 2:33
Thank You for your answer and the solution . This is really helpful . I have to check if this can be implemented for emoji-mart-vue . Thanks again
– Bujji
Nov 14 '18 at 10:36
But this doesn't solve the problem, it just sets it ONCE before losing focus.
– Sherif Salah
Nov 14 '18 at 2:16
But this doesn't solve the problem, it just sets it ONCE before losing focus.
– Sherif Salah
Nov 14 '18 at 2:16
I was just giving a basic idea of the root of the problem. I've updated my answer with a basic event listener.
– mkrl
Nov 14 '18 at 2:31
I was just giving a basic idea of the root of the problem. I've updated my answer with a basic event listener.
– mkrl
Nov 14 '18 at 2:31
excellent solution.
– Sherif Salah
Nov 14 '18 at 2:33
excellent solution.
– Sherif Salah
Nov 14 '18 at 2:33
Thank You for your answer and the solution . This is really helpful . I have to check if this can be implemented for emoji-mart-vue . Thanks again
– Bujji
Nov 14 '18 at 10:36
Thank You for your answer and the solution . This is really helpful . I have to check if this can be implemented for emoji-mart-vue . Thanks again
– Bujji
Nov 14 '18 at 10:36
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53291859%2fcontenteditable-div-how-the-button-click-event-differs-from-other-elements-cli%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
