textarea using ENTER

**jscheuer1** · 01-09-2010, 06:57 AM

Opera is also my browser of choice, and I think I see just what you mean now. This hack might serve:

Code:

		controlsFront: function(el, cfg, area){
			var t = el[cfg.controlInfo].split(cfg.controlDelimit);
			if(window.opera && t.length === 1 && !/^<.*>$/.test(t[0])){
				t = el.value.split(cfg.controlDelimit);
			}
			if(cfg.controlDelimit === '><' && t.length === 2){
				t[0] += '>';
				t[1] = '<' + t[1];
			}
			else if(t.length === 1){
				t.unshift('');
			}
			this.saveCurRng(area);
			this.insert(t[0], t[1]);
		},

It will take (in Opera only) the value attribute (which Opera doesn't strip leading spaces from) rather than the configured controlInfo attribute (like title) for insertions that are not delimited and are not tags, example:

HTML Code:

<input type="button" title=" :)" value=" :)">

will now behave as desired in Opera.

As long as you understand what is going on here, I believe this will solve your problem.

Any questions, feel free to ask.

**james438** · 01-09-2010, 07:27 PM

What is the current version of your script?

Currently I use a version of the code you posted in post #25. My code looks like:

Code:

<br><textarea name="summary" cols=75 rows=25 id="myArea"></textarea><br><br>
<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>
<input type="reset" value="Reset"><br><br>
<div id="myControls">
<input type="button" title="<b></b>" value="B">
<input type="button" title="<span class='o'></span>" value="color">
<input type="button" title="<i></i>" value="i">
<input type="button" title="&lt;a href=""></a>" value="href">
<input type="button" title="<ul></ul>" value="&lt;ul>">
<input type="button" title="<li>" value="li"><br><br>
<input type="button" title="<div style='font-size:18px;text-align:center;'></div>" value="title">
<input type="button" title="CODE" value="CODE">
<input type="button" title="<span style='text-decoration:underline;'></span>" value="underline">
<input type="button" title="<div class='q'></div>" value="quote">
<input type="image" src="/images/pops/icon_smile.gif" alt="Submit" title=":)" style="background-color:<?php print $article_color; ?>;"/>
<input type="image" src="/images/pops/icon_confused.gif" alt="Submit" title='  :/' style="background-color:<?php print $article_color; ?>;"/>
<input type="image" src="/images/pops/icon_biggrin.gif" alt="Submit" title=":D" style="background-color:<?php print $article_color; ?>;"/>
<input type="image" src="/images/pops/icon_razz.gif" alt="Submit" title=":P" style="background-color:<?php print $article_color; ?>;"/>
<input type="image" src="/images/pops/icon_wink.gif" alt="Submit" title=";)" style="background-color:<?php print $article_color; ?>;"/>
<input type="image" src="/images/pops/icon_sad.gif" alt="Submit" title=":(" style="background-color:<?php print $article_color; ?>;"/>
</div>
<br>
class='floatimgleft'

I think the current version you are referencing is from post #33. When I updated it I basically just replaced my script with the script you posted just as you posted it, but was unable to get it to work. Here is what I have anyway:

Code:

<br><textarea name="summary" cols=75 rows=25 id="myArea"></textarea><br><br>
<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();
			}: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;
				}
			};
		})(),
		controlsFront: function(el, cfg, area){
			var t = el[cfg.controlInfo].split(cfg.controlDelimit);
			if(cfg.controlDelimit === '><' && t.length === 2){
				t[0] += '>';
				t[1] = '<' + t[1];
			}
			else if(t.length === 1){
				t.unshift('');
			}
			this.saveCurRng(area);
			this.insert(t[0], t[1]);
		},
		addEvent: (function(){return window.addEventListener? function(el, ev, f){
				el.addEventListener(ev, f, false);
			}:window.attachEvent? function(el, ev, f){
				el.attachEvent('on' + ev, f);
			}:function(){return;};
		})(),
		init: function(cfg){
			this.addEvent(window, 'load', function(){
				var ctrls = document.getElementById(cfg.controls).getElementsByTagName(cfg.controlTag), i = 0,
				area = document.getElementById(cfg.el);
				editText.addEvent(area, 'change', function(){editText.saveCurRng(area);});
				if(cfg.clearSelect){
					editText.addEvent(document.getElementById(cfg.clearSelect), 'click', function(e){
						area.value = area.value;
						if(e && e.preventDefault){
							e.preventDefault();
						}
						return false;
					});
				}
				for(i; i < ctrls.length; ++i){
					(function(el){
						editText.addEvent(el, 'click', function(e){
							editText.controlsFront(el, cfg, area);
							if(e && e.preventDefault){
								e.preventDefault();
							}
							return false;
						});
					})(ctrls[i]);
				}
			});
		}
	};
})();
editText.init({
	el: 'myArea',
	controls: 'myControls',
	controlTag: 'input',
	controlInfo: 'title',
	controlDelimit: '><',
	clearSelect: 'clearSelection'
});
editText.init({
	el: 'myArea2',
	controls: 'myControls2',
	controlTag: 'input',
	controlInfo: 'title',
	controlDelimit: '><',
	clearSelect: 'clearSelection'
});
</script> 
<input type="reset" value="Reset"><br><br>
<div id="myControls">
<input type="button" title="<b></b>" value="B">
<input type="button" title="<span class='o'></span>" value="color">
<input type="button" title="<i></i>" value="i">
<input type="button" title="&lt;a href=""></a>" value="href">
<input type="button" title="<ul></ul>" value="&lt;ul>">
<input type="button" title="<li>" value="li"><br><br>
<input type="button" title="<div style='font-size:18px;text-align:center;'></div>" value="title">
<input type="button" title="CODE" value="CODE">
<input type="button" title="<span style='text-decoration:underline;'></span>" value="underline">
<input type="button" title="<div class='q'></div>" value="quote">
<input type="image" src="/images/pops/icon_smile.gif" alt="Submit" title=":)" style="background-color:<?php print $article_color; ?>;"/>
<input type="image" src="/images/pops/icon_confused.gif" alt="Submit" title='  :/' style="background-color:<?php print $article_color; ?>;"/>
<input type="image" src="/images/pops/icon_biggrin.gif" alt="Submit" title=":D" style="background-color:<?php print $article_color; ?>;"/>
<input type="image" src="/images/pops/icon_razz.gif" alt="Submit" title=":P" style="background-color:<?php print $article_color; ?>;"/>
<input type="image" src="/images/pops/icon_wink.gif" alt="Submit" title=";)" style="background-color:<?php print $article_color; ?>;"/>
<input type="image" src="/images/pops/icon_sad.gif" alt="Submit" title=":(" style="background-color:<?php print $article_color; ?>;"/>
</div>
<br>
class='floatimgleft'

If this is not the current version of your script, please let me know. Both are used in test.php pages.

**james438** · 01-09-2010, 07:34 PM

Should this thread be split up and moved to the javascript forum?

**jscheuer1** · 01-09-2010, 08:51 PM

Originally Posted by james438

Should this thread be split up and moved to the javascript forum?

Perhaps. Or the entire thread, if memory serves there is little if any real PHP in this thread. Anyways, here's a demo where it works in Opera here:

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();
			}: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;
				}
			};
		})(),
		controlsFront: function(el, cfg, area){
			var t = el[cfg.controlInfo].split(cfg.controlDelimit);
			if(window.opera && t.length === 1 && !/^<.*>$/.test(t[0])){
				t = el.value.split(cfg.controlDelimit);
			}
			if(cfg.controlDelimit === '><' && t.length === 2){
				t[0] += '>';
				t[1] = '<' + t[1];
			}
			else if(t.length === 1){
				t.unshift('');
			}
			this.saveCurRng(area);
			this.insert(t[0], t[1]);
		},
		addEvent: (function(){return window.addEventListener? function(el, ev, f){
				el.addEventListener(ev, f, false);
			}:window.attachEvent? function(el, ev, f){
				el.attachEvent('on' + ev, f);
			}:function(){return;};
		})(),
		init: function(cfg){
			this.addEvent(window, 'load', function(){
				var ctrls = document.getElementById(cfg.controls).getElementsByTagName(cfg.controlTag), i = 0,
				area = document.getElementById(cfg.el);
				editText.addEvent(area, 'change', function(){editText.saveCurRng(area);});
				for(i; i < ctrls.length; ++i){
					(function(el){
						editText.addEvent(el, 'click', function(e){
							editText.controlsFront(el, cfg, area);
							if(e && e.preventDefault){
								e.preventDefault();
							}
							return false;
						});
					})(ctrls[i]);
				}
			});
		}
	};
})();
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"> 
<input type="button" title=" :)" value=" :)"> 
</div>
</body>
</html>

**james438** · 01-09-2010, 09:49 PM

Thanks. It all works great now. For completeness here are four "buttons" that currently I use. The first uses one word. The second and third are used for prepending and appending highlighted text. The last one uses an image.

Code:

<input type="button" title="CODE" value="CODE">
<input type="button" title="<span style='text-decoration:underline;'></span>" value="underline">
<input type="button" title="<div class='q'></div>" value="quote">
<input type="image" src="/images/pops/icon_smile.gif" title=":)" value=":)"/>

How can I make the text within a button bold and another italicized italicized?

Thanks again for your time and patience with me

.

**jscheuer1** · 01-10-2010, 02:33 PM

For bold, give the button a style of font-weight: bold;

For italic, font-style: italic;

**james438** · 01-11-2010, 02:43 AM

I should have looked that one up first before asking.

<input type="button" title="<b></b>" value="B" class="btnb"> works
<b><input type="button" title="<b></b>" value="B"></b> was not working
<span style="font-weight:bold;"><input type="button" title="<b></b>" value="B"></span> was not working
<input type="button" title="<b></b>" value="B" style="font-weight:bold;"> was not working (I probably had a typo or something with this one though)

either way it all works now. I can think of no more questions for this script and thanks for all of your help

Thread: textarea using ENTER

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions