Recently I found ierange library which is a great implementation of W3C DOM Ranges for Internet Explorer.

Using it and PrototypeJS I’ve created edit in place feature to easily change the content of a div element.

Check out the DEMO »


<head>
...
<!--[if IE]>
<script type="text/javascript" src="ierange-m2.js"></script>
<![endif]-->
...
</head>

<body>
	<div id="eip">
		<div id="start">Click to edit and start typing. <br />Enter to confirm. ESC to reset.</div>
		<div id="text">This is some simple text which you can easily change if you want this is some simple text which you can easily change if you want</div>
	</div>
</body>



var simpleEIP = {
	init: function(el) {
		this.el = $(el);
		if (!this.el) {
			return;
		}
		this.range;
		this.keys = [];
		this.setKeys();
		this.el.observe('click',this.select.bind(this));
		document.observe('keyup',this.keyHandler.bind(this));
	},
	select: function(e) {
		this.range = document.createRange();
		this.range.setStart(this.el.firstChild,0);
		this.range.setEnd(this.el.firstChild, this.el.innerHTML.length);
		var selection = window.getSelection();
		selection.addRange(this.range);
	},
	keyHandler: function(e) {
		if (!this.range) {
			return;
		}
		var edit = $('edit-'+this.el.readAttribute('id'));
		if (!edit) {
			this.el.insert({after: '<textarea id="edit-'+this.el.readAttribute('id')+'" style="display: none;"></textarea>'})
			edit = $('edit-'+this.el.readAttribute('id'));
		}
		if (e.keyCode == Event.KEY_RETURN &amp;&amp; edit) {
			this.el.innerHTML = edit.value;
			this.el.show();
			edit.hide();
			return;
		}
		if (e.keyCode == Event.KEY_ESC &amp;&amp; edit) {
			edit.clear().hide();
			this.el.show();
			return;
		}
		var w = edit.getStyle('width')
		if (!w) {
			w = 15;
		} else {
			w = parseInt(w.replace('px',''));
			if (w < 300) {
				w += 15;
			}
		}
		edit.setStyle({width:w+'px'});
		if (e.keyCode < 48 || e.keyCode > 90 || edit.visible()) {
			e.stop();
			return;
		}
		this.el.hide();
		edit.show().setValue(this.keys[e.keyCode]).focus();
	},
	setKeys: function(){
		this.keys[48] = '0';
		this.keys[49] = '1';
		this.keys[50] = '2';
		this.keys[51] = '3';
		this.keys[52] = '4';
		this.keys[53] = '5';
		this.keys[54] = '6';
		this.keys[55] = '7';
		this.keys[56] = '8';
		this.keys[57] = '9';
		this.keys[65] = 'a';
		this.keys[66] = 'b';
		this.keys[67] = 'c';
		this.keys[68] = 'd';
		this.keys[69] = 'e';
		this.keys[70] = 'f';
		this.keys[71] = 'g';
		this.keys[72] = 'h';
		this.keys[73] = 'i';
		this.keys[74] = 'j';
		this.keys[75] = 'k';
		this.keys[76] = 'l';
		this.keys[77] = 'm';
		this.keys[78] = 'n';
		this.keys[79] = 'o';
		this.keys[80] = 'p';
		this.keys[81] = 'q';
		this.keys[82] = 'r';
		this.keys[83] = 's';
		this.keys[84] = 't';
		this.keys[85] = 'u';
		this.keys[86] = 'v';
		this.keys[87] = 'w';
		this.keys[88] = 'x';
		this.keys[89] = 'y';
		this.keys[90] = 'z';
	}
}
document.observe('dom:loaded', simpleEIP.init.bind(simpleEIP,'text'));

No Comments
Javascript, Prototype