When selecting text in the textarea cursor position and selection, I can get the read properties of textarea.selectionStart, textarea.selectionEnd and textarea.selectionDirection (Figure 1).
If you start dragging the selected text, an additional cursor appears, where the selected fragment will be transferred when the transfer is completed (Figure 2).
How do I get the position of the additional cursor at the 'dragover' event?
Related
Exist way how to set caret pixel position in editable DIV with JavaScript (Angular, jQuery)? I look for this functionality many days.
Get caret position in pixel I can do with this (there is problem with autowrapped long text).
I need switch from one editable DIV to another with UP/DOWN key handler and I need same position of caret. Fe. if I have DIV#2 and caret position is after third X (30px from left), then click UP key. I need switch caret to DIV#1 on last line (computed with autowrap text) on same position from left (30px from left! not after third I). As on this animation:
Please, help me!
I am creating a basic editor using slate.js and React.js.
I want to insert text inside the editor at current selected position when i click on a card outside the editor i.e. when i click on a card containing a text, the card on text should get inserted at the last cursor position in slate.js editor.
You don't need to get cursor position. Slate remembers selection when you click your button. You just need to insert content:
editor.insertBlock(...)
I want to set cursor position manually to specific position in CKEditor. I have implemented short keys on some key press i am adding text using set data in CKEditor (e.g. if i type "RnD+Space", it will replace with "research and development "). The problem is that after set data cursor will set to last at the end of all text.
I want cursor will be there, where the text is replaced. Is this possible?
I'm working on a drag and drop solution, but I don't want specific items to be dropped on. For that, I use the dragnot = "true" attribute in a div.
It works, however when an user drags a div on this dragnot div, I would like to change the cursor to not-allowed. But the cursor only updates after I dropped the div, not when I dragenter.
I have put up a JSfiddle where it's demonstrated. Try to move div A or div C into div B. You'll see the cursor changed after you dropped the div (mouse over div B again if you don't see the cursor change).
How can the cursor be changed realtime?
I have a div tag that is contenteditable so that users can type in the div.
If a user selects some text to make it bold, the following code is executed:
browser.execute("document.execCommand(\"Bold\");
document.getElementById(\"EditDIV\").focus()");
After the execution, the focus is lost and the vertical scrollbar in the browser moves to the top of the browser.
I want the cursor to stay at the text where it was before.
I tried the following:
Store the selection position x, y:
Code:
cursorPos=document.selection.createRange().duplicate(); clickx = cursorPos.getBoundingClientRect().left; clicky = cursorPos.getBoundingClientRect().top;
Restore the selection position:
Code:
cursorPos = document.body.createTextRange(); cursorPos.moveToPoint(clickx, clicky); cursorPos.select();
But this code finds the position of the selected text with respect to the beginning of the current view in the browser. Hence, the cursor stays at the same position but the text moves down.
It is expected to make the cursor stay at the text that was selected.