1

Can some one help me to get this resolved? Here is the stackblitz code I am working

If you know any workaround, please let me know.

The Caret/cursur keeps going to start position and typing backward.can anyone help me to get this resolved in Angular(Typescript)?I had to choose div instead of textarea as I have links.

(event.target as HTMLInputElement).focus();
document.execCommand('selectAll', true, null);
document.getSelection().collapseToEnd();
Dotnet
  • 299
  • 1
  • 4
  • 18
  • 1
    Does [this answer](https://stackoverflow.com/a/62186935/9953550) answer your question? – YulePale Jul 09 '20 at 02:32
  • No didnt work. I have to use innerHTML as I have to show as link and I need to replace content as they type.I tried your example as well. https://stackblitz.com/edit/angular-ivy-pndmep?file=src%2Fapp%2Fapp.component.html . Below replace content is causing issue which is required for my requirement. .replace('foo', 'bar') – Dotnet Jul 09 '20 at 03:24
  • 1
    can you please create a [stackblitz](https://stackblitz.com/) of your current code so that I can understand everything well. – YulePale Jul 09 '20 at 04:56
  • @YulePale. Here is the link https://stackblitz.com/edit/angular-ivy-sjhbb6 – Dotnet Jul 09 '20 at 16:13
  • 1
    You have to manually restore caret position of you programmatically update content of any editable element. Contenteditable here is no different from regular input, except caret position is harder to get/set – waterplea Jul 10 '20 at 03:46
  • Hi @waterplea, do you know how to set caret position in angular/Typescript.I have tried several option.I must be doing something wrong. – Dotnet Jul 10 '20 at 05:19
  • 1
    Vanilla ranges accept setting offset. However it is in characters only in text nodes, in other nodes offset goes over child nodes. Here's a function I wrote to set offset in characters, this would probably help you: https://gist.github.com/waterplea/fcb68a1fc39b677c33c0446159b46a6b – waterplea Jul 10 '20 at 10:24
  • 1
    I agree @waterplea. I have tried various ways none of them works because angular 'refreshes' the caret postion when you change the HTML. The working answer should address the 'caret resetting'. [This answer](https://stackoverflow.com/a/62829289/9953550) does that. – YulePale Jul 10 '20 at 12:25
  • 2
    Editing doesn't always happen at the end, you need a generic solution. And it is not Angular that is doing so, this is how HTML works. If you programmatically change editable value caret does not know where it stands in the new value. – waterplea Jul 10 '20 at 13:26

1 Answers1

2

here's one of the answer from StackOverflow

setCaretToEnd(target/*: HTMLDivElement*/) {
  const range = document.createRange();
  const sel = window.getSelection();
  range.selectNodeContents(target);
  range.collapse(false);
  sel.removeAllRanges();
  sel.addRange(range);
  target.focus();
  range.detach(); // optimization

  // set scroll to the end if multiline
  target.scrollTop = target.scrollHeight; 
}

Here's the updated stackblitz plunker

Basheer Kharoti
  • 4,202
  • 5
  • 24
  • 50