How to set cursor in a textbox after a word has been entered?

Question

Edited to clarify requirements

I am trying to simulate a click in a div through browser scripting. The div I am working on is :

     <div id="myid" class="myclass" hidefocus="true" aria-label="Message Body" g_editable="true" role="textbox" aria-multiline="true" contenteditable="true" tabindex="1">hello how</div>

The problem is that I am able to trigger a focus but I wanted a drop down to appear that only appears after a click has been made. The focus is occuring but I cannot simulate the click. My requirement is to use Javascript alone. What I have tried:

      document.getElementById("id1").dispatchEvent(new Event("click"));

score 0 · Answer 1 · answered Feb 04 '20 at 22:41

0

document.getElementById(":16b").focus();
document.getElementById(":16b").selectionStart = 5;

answered Feb 04 '20 at 22:41

Kevin Morey

46
3

Hi Kevin, The first solution doesn't work in the fiddle. The cursor isn't blinking on the last letter. – user5938020 Feb 05 '20 at 02:39
I can't use textarea. its just a div as in the fiddle. – user5938020 Feb 05 '20 at 03:22
While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – RyanNerd Feb 05 '20 at 06:46
If it needs to be a contenteditable div, you should use this answer https://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div – Kevin Morey Feb 05 '20 at 20:57

score 0 · Accepted Answer · answered Feb 07 '20 at 10:29

var el = document.getElementById("editable");
var range = document.createRange();
var sel = window.getSelection();
range.setStart(el.childNodes[0], 5); //edit the offset here...e.g 5 offsets cursor 
by 5 char
sel.removeAllRanges();
sel.addRange(range);
el.focus();

How to set cursor in a textbox after a word has been entered?

2 Answers2