UPDATE I’ve written a simpler version of this that also works in IE < 9: https://stackoverflow.com/a/4812022/96100 Old Answer This is actually a more useful result than a character offset within the text of the whole document: the startOffset property of a DOM Range (which is what window.getSelection().getRangeAt() returns) is an offset relative to its startContainer … Read more
I found out how. You use the contentEditable property of the DOMElement, like so <div onClick=”this.contentEditable=”true”;”> lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor </div>
The following will do the job in all the major browsers: function replaceSelectedText(replacementText) { var sel, range; if (window.getSelection) { sel = window.getSelection(); if (sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); range.insertNode(document.createTextNode(replacementText)); } } else if (document.selection && document.selection.createRange) { range = document.selection.createRange(); range.text = replacementText; } }
NgModel expects the bound element to have a value property, which divs don’t have. That’s why you get the No value accessor error. You can set up your own equivalent property and event databinding using the textContent property (instead of value) and the input event: import { Component } from “angular2/core”; @Component({ selector: “my-app”, template: … Read more
You can attach an event handler to the keydown or keypress event for the contentEditable field and cancel the event if the keycode identifies itself as enter (or shift+enter). This will disable enter/shift+enter completely when focus is in the contentEditable field. If using jQuery, something like: $(“#idContentEditable”).keypress(function(e){ return e.which != 13; }); …which will return … Read more
Here is a CSS only solution augmenting some of the other answers:- <div contentEditable=true data-ph=”My Placeholder String”></div> <style> [contentEditable=true]:empty:not(:focus)::before{ content:attr(data-ph) } </style> EDIT: Here is my snippet on codepen -> http://codepen.io/mrmoje/pen/lkLez EDIT2: Be advised, this method doesn’t work 100% for multi-line applications due to residual <br> elements being present in the div after performing a … Read more
This technique appears to avoid the Chrome bug that does show BRs the first time (with the code you mentionned you need to push two times the Enter key). It’s not a perfect hack but it works: it adds a whitespace after your BR so it show properly. However, you will see that adding only … Read more
[contenteditable=”true”].single-line { white-space: nowrap; width:200px; overflow: hidden; } [contenteditable=”true”].single-line br { display:none; } [contenteditable=”true”].single-line * { display:inline; white-space:nowrap; } <div contenteditable=”true” class=”single-line”> This should work. </div>
The following function will insert text at the caret position and delete the existing selection. It works in all the mainstream desktop browsers: function insertTextAtCaret(text) { var sel, range; if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); range.insertNode( document.createTextNode(text) ); } } else if (document.selection && document.selection.createRange) { … Read more
In most browsers, you can use the insertNode() method of the Range you obtain from the selection. In IE < 9 you can use pasteHTML(), as you mentioned. Below is a function to do this in all major browsers. If content is already selected, it is replaced, so this is effectively a paste operation. Also, … Read more