Develop Reference

internet explorer alternative to document.execCommand("insertText",...), for text insertion that can be undone/redone by the user

When the user edits a contenteditable div, and press some keys, I would like to override the default behavior.
For instance, I want to insert a normal line break when the user press ENTER.
I do that using document.execCommand("insertText",...)
This is the only way I have found so far to make this action undoable and redoable by the user.
<div id="editor" contenteditable="true" style="white-space:pre-wrap">
Some text....
</div>
<script>
$("#editor").keydown(function(evt){
console.log(evt.keyCode);
if(evt.keyCode==13){
document.execCommand("insertText",false,"\n");
evt.preventDefault();
evt.stopPropagation();
}
}
</script>
This code works well on chrome and firefox. But, ie does not support "inserttext". Would there be a way to insert text with ie, such that the user can undo it?

IE 11 has new ms-beginUndoUnit and ms-endUndoUnit commands.
I tried and failed to create a working solution for IE 11 using these. Inserting a line break is hard with DOM ranges and selections; you can do it more easily in IE using its legacy document.selection and TextRange objects but unfortunately IE 11 removed document.selection (but not TextRange, strangely) which makes it difficult. After coding a nasty workaround to create a TextRange from the selection, undo didn't work anyway. Here's what I did:
http://jsfiddle.net/E7sBD/2
I decided to have another go using DOM Range and selection objects. The line break insertion code is illustrative and shouldn't be used for anything serious because it involves adding a non-breaking space to give the caret somewhere to go (trying to place it directly after the <br> does not work). Undoing does remove the inserted content but unfortunately doesn't move the caret.
http://jsfiddle.net/E7sBD/4/

You can always go the simpler and more stable way to catch the change event on the input div and change the last char from the input string to your liking.
http://api.jquery.com/change is invented i think for that purpose :)
Change your angel and you see a whole new world :3

IE lose custom tag while sethtml

This following Code Running in FF & IE
TempNode= CKEDITOR.dom.element.createFromHtml("<span></span>");
TempNode.setHtml("<p>test</p>");
But below mentioned code losing user defined Tags In IE (FF Works Fine)
TempNode= CKEDITOR.dom.element.createFromHtml("<span></span>");
TempNode.setHtml("<myTag>test</myTag>");
Also same problem with *appendHtml()*
My Exact Requirement is :
Element.setHtml(AnotherElement.getHtml());
original value in AnotherElement.getHtml() is:
<P><mytag id="test_39878" data-cke-expando="undefined">some. text</myTag></P>
after Element.sethtml() it containing value is :
<P>some. tex</MYTAG></P>

If you want to use your own tags in IE you've got to create them first. This is the same situation that we've got with HTML5 tags.
So before setting HTML with <myTag>, create it CKEDITOR.document.createElement( 'mytag' ) just to let IE know it exists.
BTW. Remember that elements must be created in the same document in which they'll be used. So if you want to insert them into editor's content, then create them in editor's document (e.g. CKEDITOR.instances.editor1.document). Otherwise IE will throw an error.

problem with IE which removes new lines from $("#content").text()

problem with IE which removes new lines from $("#content").text()
HTML Code
<div id="content">
<p>hello world</p>
<p>this is a paragraph</p>
</div>
jQuery Code
alert($("#content").text());
result (IE) IE removes new line (\n) how can i fix this problem ?
hello worldthis is a paragraph
result (FF)
hello world
this is a paragraph
take a look :
http://jsfiddle.net/vB3bx/

It works fine if you use the div's innerText property. Try replacing
alert($("#content").text());
with
alert( document.getElementById( "content" ).innerText );

Internet Explorer normalizes all white-space and new-line characters into the SPACE character. As far as I know, there is nothing you can do about it.
btw, it seems that IE9 beta changed this behavior. I get new-lines in it.

I'm pretty sure Sime Vidas is correct. I've tried just about everything and whatever I try (innerText, innerHTML, jQuery methods, TextRange, cloning element and putting it inside a pre element etc etc) white space is removed. I'm guessing IE will just remove it on any type of call. It clearly is there during rendering since a white-space:pre will show it, but retrieving it through javascript will always remove the white space except for pre and textarea content.
This behavior has changed in IE9. The only solution in older versions would be to replace new line characters with tags (or anything really, semicolon etc) on the server if possible and then replace them back into \n in javascript after retrieving the text content.

Not sure you're going to find a solution using text() if you consider the following:
Due to variations in the HTML parsers
in different browsers, the text
returned may vary in newlines and
other white space.
at http://api.jquery.com/text/

JavaScript: Quickly insert text into long textarea

I am playing around with creating an HTML-textarea based plain text editor to edit my scripts (using e.g. Mozilla Prism + a localhost install/ webserver). It works fine so far, but when I want to insert something at the cursor position, it gets slow in Firefox when there is a lot of text in the textarea (Chrome works fine). E.g. with 133k filled in the textarea it takes around 1 sec to perform inserting 4 spaces.
I already have and use elm.selectionStart and elm.selectionEnd. Based on these I then copy the text, manipulate it, and set the value back into the textarea -- perhaps that is what's causing the bottleneck (I'm using the similar approach as answered on this site before). Ideally, I would probably like to have something like elm.selectedText = 'foobar' but can't find this...
It doesn't necessarily need to be crossbrowser...
Can someone help?

According to this article on codemirror, using designMode is faster than using a textarea, because you can edit parts of the content instead of editing the whole text in one go.

There's an API that replaces the selected text: textarea.setRangeText('text').
Here's a demo:
const textarea = document.querySelector('textarea');
textarea.addEventListener('click', () => {
textarea.setRangeText('WOW');
});
<textarea rows="10" cols="40">Click anywhere or select any text in here. It will be replaced by WOW</textarea>
There's also document.execCommand('insertText') with undo support but it's not cross-browser. Try insert-text-textarea for a cross-browser solution.

Adding an input field to the dom and focusing it in IE

I am trying to make a div, that when you click it turns into an input box, and focuses it. I am using prototype to achieve this. This works in both Chrome and Firefox, but not in IE. IE refuses to focus the newly added input field, even if I set a 1 second timeout.
Basically the code works like this:
var viewElement = new Element("div").update("text");
var editElement = new Element("input", {"type":"text"});
root.update(viewElement);
// pseudo shortcut for the sake of information:
viewElementOnClick = function(event) {
root.update(editElement);
editElement.focus();
}
The above example is a shortened version of the actual code, the actual code works fine except the focus bit in IE.
Are there limitations on the focus function in IE? Do I need to place the input in a form?

My guess is that IE hasn't updated the DOM yet when you make the call to focus(). Sometimes browsers will wait until a script has finished executing before updating the DOM.
I would try doing the update, then doing
setTimeout("setFocus", 0);
function setFocus()
{
editElement.focus();
}
Your other option would be to have both items present in the DOM at all times and just swap the style.display on them depending on what you need hidden/shown at a given time.

What version IE? What's your DocType set to? is it strict, standards or quirks mode? Any javascript errors appearing (check the status bar bottom left for a little yellow warning sign) ? Enable error announcing for all errors via Tools > Options > Advanced.
Oisin

The question is already answered by 17 of 26. I just want to point out, that Prototype has native mechanism for this: Function.defer()