Here's a cleaned up version (still needs some work), but at least I solved the problem I was having in IE with the cursor:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
/* editText Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
var editText = {
init: function(){return;}
};
(function(){
if(!document.getElementById){
return;
}
editText = {
saveCurRng: (function(){return document.selection?
function(el){this.el = el; el.focus(); this.curRng = document.selection.createRange();}:
function(el){this.el = el, this.curRng = typeof el.selectionStart === 'number'?
el.value.substring(el.selectionStart, el.selectionEnd) : null;}
})(),
insert: (function(){return document.selection?
function(btag, etag){
this.el.focus();
if(!window.opera){
document.selection.empty();
}
this.curRng.text = btag + this.curRng.text + etag;
this.el.blur();
this.el.focus();
this.saveCurRng(this.el);
}:function(btag, etag){
if (typeof this.el.selectionStart === 'number'){
var el = this.el, startPos = el.selectionStart, endPos = el.selectionEnd,
l = [btag, this.curRng, etag].join('').length; el.focus();
el.value = [el.value.substring(0, startPos), btag, this.curRng, etag,
el.value.substring(endPos, el.value.length)].join('');
el.selectionStart = el.selectionEnd = startPos + l;
this.saveCurRng(el);
}
};
})(),
init: (function(){
return window.addEventListener? function(cfg){
window.addEventListener('load', function(){
var ctrls = document.getElementById(cfg.controls).getElementsByTagName(cfg.controlTag), i = 0,
area = document.getElementById(cfg.el);
area.addEventListener('change', function(){editText.saveCurRng(area);}, false);
for(i; i < ctrls.length; ++i){
ctrls[i].addEventListener('click', function(e){
var t = this[cfg.controlInfo].split(cfg.controlDelimit);
if(cfg.controlDelimit === '><' && t.length === 2){
t[0] += '>';
t[1] = '<' + t[1];
}
if(t.length === 1){
t.unshift('');
}
editText.saveCurRng(area);
editText.insert(t[0], t[1]);
e.preventDefault();
}, false);
}
}, false);
}:window.attachEvent? function(cfg){
window.attachEvent('onload', function(){
var ctrls = document.getElementById(cfg.controls).getElementsByTagName(cfg.controlTag), i = 0,
area = document.getElementById(cfg.el);
area.attachEvent('onchnage', function(){editText.saveCurRng(area);});
for(i; i < ctrls.length; ++i){
(function(el){
el.attachEvent('onclick', function(){
var t = el[cfg.controlInfo].split(cfg.controlDelimit);
if(cfg.controlDelimit === '><' && t.length === 2){
t[0] += '>';
t[1] = '<' + t[1];
}
if(t.length === 1){
t.unshift('');
}
editText.saveCurRng(area);
editText.insert(t[0], t[1]);
return false;
});
})(ctrls[i]);
}
});
}:function(){return;};
})()
};
})();
editText.init({
el: 'myArea',
controls: 'myControls',
controlTag: 'input',
controlInfo: 'title',
controlDelimit: '><'
});
</script>
</head>
<body>
<form action="#">
<div>
<textarea id="myArea" rows=5 cols=40>The Slow Pink Fox Jumped Over the Quick Green Dog.</textarea><br>
<input type="reset" value="Reset">
</div>
</form>
<div id="myControls">
<input type="button" title="<b></b>" value="B">
<input type="button" title="<i></i>" value="I">
<input type="button" title="<br>" value="BR">
</div>
</body>
</html>
Reply With Quote
Originally Posted by gurmeet
Bookmarks