Resolved textarea using ENTER

It can almost certainly be improved and altered to work in Firefox. I don't know how, because I am not fluent in javascript at all, but maybe someone else knows how to alter it. It probably is not even that hard to update it either. Since it would be nice to have it work in Firefox as well, I posted the script in the javascript forums.

jscheuer1, do you happen to know if work is being done in Firefox to get more javascript/CSS to be more standards compliant? I know that IE is working at it as well as Opera, but I wasn't sure if Firefox was going to go down IE's old route of letting everyone else conform to them. IE, thankfully, eventually gave up on that idea. I want to add that I love Opera, Firefox, and I am learning to like IE again too and am not trying to bash Firefox.

just simply use the function
nl2br() in PHP, u ll get desired output... of use the PRE tag while giving output on the screen....
hop it l work 4 u

All browsers with the exception of IE pretty much follow standards, and IE is slowly improving in that regard with each new version. All this stuff with document.selection and createRange is non-standard.

I've been playing around with this off and on today. I'm not really happy with the code yet, as it is pretty sloppy - I was just trying to get it to work. And, I cant get IE to move the insertion point to the end of the inserted text in all cases (the move and collapse methods for the created range, which are supposed to move the insertion point, seem to have no effect unless you do something to the range after moving or collapsing it, and I'm not sure if there is a way to do this that will yield what I want here). I was able to do what I want in all the other browsers. So, if anyone has information on moving the insertion point (cursor) in IE (preferably independently of the selection object, but either way is OK), I'd appreciate that. Most likely I will be cleaning up the code now that I at least have a working version. Here's what I have so far:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> function insertAtCursor(myField, myValue) { //Standard Method support if (myField.selectionStart || myField.selectionStart === 0) { var startPos = myField.selectionStart; var endPos = myField.selectionEnd; myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length); myField.selectionStart = myField.selectionEnd = startPos + myValue.length; } } function getMozRng(el){ if(typeof el.selectionStart !== 'number') return false; return el.value.substring(el.selectionStart, el.selectionEnd); } surround.curRng = ''; function saveCurRng(el){ surround.curRng = document.selection? document.selection.createRange() : getMozRng(el); } function surround(btag, etag){ if(surround.curRng === false){return;} var el = document.editform.elements.article; el.focus(); if(document.selection){ surround.curRng.text = btag + surround.curRng.text + etag; document.selection.empty(); el.blur(); el.focus(); } else{ insertAtCursor(el, btag + surround.curRng + etag); } saveCurRng(el); return false; } </script> </head> <body> <form name="editform"> <textarea rows=5 cols=40 name="article" onkeyup="saveCurRng(this)" onouseup="saveCurRng(this)" onmouseout="saveCurRng(this)"></textarea> </form> <a href="#" onclick="return surround('<b>', '</b>');">bold</a><br> <a href="#" onclick="return surround('<i>', '</i>');">italic</a> </body> </html>

Woot! Much appreciated! I have zero knowledge of javascript, so this is awesome for me.

Thanks :)

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>

Quote:

Originally Posted by gurmeet

just simply use the function
nl2br() in PHP

Weirdly, when I tried using that function, it didn't actually work, not even this worked:

PHP Code:

$comment = str_replace(array("\r\n", "\r", "\n"), "<br />", $comment);

The only way I managed to get mine to do what I wanted was to use the above, but then escape all the backslashes, like so:

PHP Code:

$comment = str_replace(array("\\r\\n", "\\r", "\\n"), "<br />", $comment);

Anyone else having the same issue?

is your server on a Windows platform? This was the only time I ever noticed this type of behavior. Either that or a certain module is not being loaded into php that does the auto escaping of certain characters.

Hope this helps nonetheless.

Well this is just on my local server, so WAMP. I guess that explains it.

You never can be certain as far as portable server side code goes. Best to cover all bases. If on the other hand you are writing for your own use on a known server, you can just do what works.

In javascript at least, probably PHP as well, it rarely hurts to be formal, and escaping escapes in regular expressions expressed as strings (quoted), is generally a good idea.

PHP (in my limited experience with it) is more forgiving in general in these sort of things than is javascript. Like quotes don't always have to be employed for bracketed strings as property names. But, as I say, doing it right usually never hurts.

Not sure where the best place is to post this question but...

jscheuer, in the javascript tags program you wrote is there a way to get it to work for multiple textareas?