Cursor (caret ) moves to beginning when call on change event on contenteditable div using angular js

jquery set cursor position in contenteditable div
contenteditable set cursor position to end
contenteditable cursor position
set caret position javascript
javascript get position of cursor in div
jquery contenteditable cursor position
focus on contenteditable div

The cursor gets moved to the beginning instead of being set to last type position when the change event is fired. I am using content editable div using angular js.


Why does the cursor position move to beginning?

I know this is an old question but, as I've been searching my whole working day to find a solution to this issue, I'd like to share this solution to people who might still looking for a working answer :

var el, el2, range, sel;

el = element[0];
range = document.createRange();
sel = window.getSelection();
if (el.childNodes.length > 0) {
el2 = el.childNodes[el.childNodes.length - 1];
} else {

I got this code originally from akatov/angular-contenteditable directive, "moveCaretToEndOnChange" method. and this worked for me.

How to set caret(cursor) position in contenteditable element (div , For example, to set the caret to the fifth character of the second line of text, you'd If anyone is interested I get the current cursor position using this code: to know how to auto-type a single quote char and move the caret back (like a lot of const [start, end] = getSelectionOffset(container) // change container html container. This is a common problem. Here is some background and potential solutions (none of them are ideal): js contenteditable - prevent from writing into newly inserted element How to place caret inside an empty DOM Element Node How to select a node in a range with webkit browsers?

Cursor+caret+moves+to+beginning+when+call+on+change+event+ , Cursor (caret ) moves to beginning when call on change event on contenteditable div using angular js - angularjs. Update. I've written a cross-browser range and selection library called Rangy that incorporates an improved version of the code I posted below. You can use the selection save and restore module for this particular question, although I'd be tempted to use something like @Nico Burns's answer if you're not doing anything else with selections in your project and don't need the bulk of a library.

In my case I was using the same reference of array for changing the innerHTML as was used on the DOM (two way binding). Hence the dom re-rendered and thus the cursor moved to the beginning.

The Solution was to make a deep copy of the array using JSON.parse(JSON.stringify(a)); where a is the array that stores the words that are contenteditable and then do the change let filetexts =JSON.parse(JSON.stringify(this.filetexts)); // updating the current text filetexts[alternativesIndex].Alternatives[0].Words[wordIndex].Word = html; let data = { Text: JSON.stringify(filetexts) }; this.fileService.changeFileText(data, this.file.fileId).subscribe(res => { });

Making content editable, By using some JavaScript event handlers, you can transform your the grabber that allows moving of absolutely-positioned elements. <div contenteditable="​true"> This text can be edited by the user. When using contentEditable , calling execCommand() will affect the intLink { cursor: pointer; } img. keypress is the only key event in which you can reliably detect which character has been typed. keyup and keydown won't do. The code handles the insertion of parentheses/braces manually by preventing the default action of the keypress event. The selection/caret stuff is simple when using DOM methods.

React set caret position contenteditable, This repository contains a set of native AngularJS directives based on of a content editable div is to move the caret/cursor to the beginning of the text in the div Touch event does not work when document is long, so i cannot start typing. am using setTimeout() to call a function which changes the innerHTML of the div. in  2 Cursor (caret ) moves to beginning when call on change event on contenteditable div using angular js Aug 24 '15 1 how to replace numbers in body to persian numbers? May 7 '14

Editor events | Docs, The fake caret will appear where the cursor is normally not shown, such as at the start or end of tables and non-editable content. SelectionChange, N/A, Fired  Now i can think of 2 ways: as you said, writing the text from the contenteditable div to the input; and with ajax. 1.hidden input way so the workflow here is that you copy what html is inside the contenteditable div to a hidden input with javascript. when you click

yairEO/tagify: lightweight, efficient Tags input component in , lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue The most common way is to simply listen to the change event on the original input To do the same but for specific tag(s), set those tags' data with editable property <div class="tagify__dropdown tagify__dropdown--text" style="left:​993.5px;  If the start and end value are the same, it means that there's no selected text and the start value (or end value) is the position of the cursor. Note that in IE the textarea or text input must have the focus before calling the mentioned method. You can ensure this by calling the focus() method of the element (or its jQuery object). Have fun !