textarea using ENTER

**jscheuer1** · 11-26-2009, 10:54 AM

It already does, or should, that's how I wrote it. But I don't believe I actually tested it for that. You can, and let me know if there are any problems. Here is the crucial part of the code for that:

Code:

editText.init({
	el: 'myArea',
	controls: 'myControls',
	controlTag: 'input',
	controlInfo: 'title',
	controlDelimit: '><'
});

As you will see in my post presenting it in its 'cleaned up' version (#25 in this thread, which is the code one should use for multiple textareas), that bit follows the main body of the script code. It is a function that takes an object as its sole parameter for the purpose of initializing a given textarea to the functionality of the main code. This is a rather common method used in a number of scripts. Let's annotate it:

Code:

editText.init({
	el: 'myArea', // id of the textarea to init
	controls: 'myControls', // id of the division holding the editing controls for this textarea
	controlTag: 'input', // tagName used for the controls within that division
	controlInfo: 'title', // attribute used within those tags to express what they will do
	controlDelimit: '><' // delimiter used within that attribute to separate beginning and end tags
});

Now these should be even clearer as to what each does. Currently they are all required. Just make up separate inits for each textarea you wish the code to apply to. The only property that really needs a bit of further explanation is the controlDelimit property. It only applies to controls that have a beginning and end tag, so a bit of care should be used in choosing it so as not to inadvertently split up tags that don't have begin and end tags. In the above init, it uses the one special case the script affords - utilizing the >< between tags as the delimeter. Writ that way, it will take a tag like <b></b> and split it into it's opening and closing tags and add back in the >< used to split them, example from the markup in that post:

HTML Code:

<input type="button" title="<i></i>" value="I">

This button will surround the highlighted text with its title attribute, the <i></i> tag. But if the controlDelimit property for this textarea had been a dash (-), the title would have had to have been like:

HTML Code:

<input type="button" title="<i>-</i>" value="I">

The fact that it is the title that is used is set by the controlInfo property of the init functions parameter object. Like if the controlTag property were set to 'a', and the controlInfo property set to 'rel', the rel attribute of links could be used in place of the title attribute of inputs.

Anyways, I think you get the general idea. Let me know if you have any problems or questions.

**james438** · 11-26-2009, 11:55 AM

I have not taken up javascript yet, but I think I understood 90% - 95% of your description.

I was planning on asking you about the delimiters in another post, so thanks for explaining

. It looks like I could also use ][ as delimiters as well, but wrapping code in text like CODE would not work out so well.

Anyway, when I tried it out with 2 textareas and giving each one its own personalized id tag I still get the same problem. The tags only work on one textarea. I figure I am having a bit of trouble with the syntax. Here is the section I am working with. The altered sections have been highlighted.

Code:

editText.init({
	el: 'myArea','myArea2',
	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> 
<form action="#">
<div>
<textarea id="myArea2" 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>

I have tried lots of different variations and have tried adding separate id tags for the controls as well, but just can't seem to get it to work.

I have already updated the code on my site with yours. If it is alright with you I would like your permission to post a link on my site to this thread as well as the code and reference you as the creator.

**jscheuer1** · 11-26-2009, 12:25 PM

Well you would need two sets of controls, at least the way the script is written now. I believe I updated it a bit from its last published version, but that shouldn't make a difference to the multi-use functionality, though it may have. Anyways, here is a working version with two textareas:

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(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> 
</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"> <input id="clearSelection" type="button" value="DeSelect">
</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>
<form action="#">
<div>
<textarea id="myArea2" rows=5 cols=40>Nothing Here to Look at Folks, Move Along . . .</textarea><br>
<input type="reset" value="Reset"> <input id="clearSelection" type="button" value="DeSelect">
</div>
</form> 
<div id="myControls2">
<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>

Also, using ][ as delimiters probably won't work the way you think. Only >< gets split and used. If you want square brackets around your tags (as would be useful on a bulletin board or other system that uses tags like that), you should use a neutral character for the delimiter, like - say an undescore (_). Then for example your title could be:

Code:

<input type="button" title="[b]_[/b]" value="B">

Though you could edit the script here (adding the highlighted):

Code:

		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(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]);
		},

To allow for stuff like:

Code:

<input type="button" title="[b][/b]" value="B">

**james438** · 01-08-2010, 10:37 PM

Code:

editText.init({
	el: 'myArea', // id of the textarea to init
	controls: 'myControls', // id of the division holding the editing controls for this textarea
	controlTag: 'input', // tagName used for the controls within that division
	controlInfo: 'title', // attribute used within those tags to express what they will do
	controlDelimit: '><' // delimiter used within that attribute to separate beginning and end tags
});

What if I wanted to use 'input' and 'a' tags?

**jscheuer1** · 01-09-2010, 01:41 AM

Originally Posted by james438

Code:

editText.init({
	el: 'myArea', // id of the textarea to init
	controls: 'myControls', // id of the division holding the editing controls for this textarea
	controlTag: 'input', // tagName used for the controls within that division
	controlInfo: 'title', // attribute used within those tags to express what they will do
	controlDelimit: '><' // delimiter used within that attribute to separate beginning and end tags
});

What if I wanted to use 'input' and 'a' tags?

Just to be clear, and I think I know the answer (guessing yes here) - but do you mean for the controlTag property?

If so, setting it to 'input', a hidden input could probably be used to execute the a tags via a little helper onclick function of the a tag, though a more fully integrated solution would be doable and preferable.

If not, then what?

**james438** · 01-09-2010, 04:17 AM

yep. It looks like the input tag is more versatile than I was thinking. Here are the buttons I currently use now:

Code:

<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="link">
<input type="button" title="<ul></ul>" value="list">
<input type="button" title="<li>" value="li">
<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=":)">

I am now going to add several more for the different smiles that are commonly seen. It may be easy to just type out : ) but this way I can see which ones are available and what they look like.

**jscheuer1** · 01-09-2010, 05:00 AM

Originally Posted by james438

yep. It looks like the input tag is more versatile than I was thinking.

Good point. I hadn't considered that when I posted last, but of course you are correct. Does this mean that you've solved this to your satisfaction (guessing yes again)?

**james438** · 01-09-2010, 05:05 AM

Well, yes. You pointed me in the right direction though

In your script you seem to trim the leading whitespace. Is there a way to disable that. I tried looking for the term trim and/or \s, in your script, but with no luck. It could be that this is happening due to a default action of javascript.

**jscheuer1** · 01-09-2010, 05:21 AM

Not that I recall, and not looking over the code. I'm at a bit of a loss though, what white space? Where and when? What browser?

**james438** · 01-09-2010, 05:54 AM

I need to get in the habit of checking the browser versions.

Code:

<input type="image" src="/images/pops/icon_smile.gif" alt="Submit" title=" :)">

works in Firefox and IE8, but not so much in Opera.
It operates in Opera as if it were:

Code:

<input type="image" src="/images/pops/icon_smile.gif" alt="Submit" title=":)">

the same is true with

Code:

<input type="image" src="/images/pops/icon_smile.gif" alt="Submit" title="&nbsp;:)">

No biggie. Opera is my browser of choice, but I feel it is more of a niche market browser. Do you think I should post it as a bug in the Opera forums?

Thread: textarea using ENTER

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions