Page 3 of 5 FirstFirst 12345 LastLast
Results 21 to 30 of 47

Thread: textarea using ENTER

  1. #21
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,239
    Thanks
    96
    Thanked 103 Times in 101 Posts

    Default

    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.
    Last edited by james438; 11-19-2009 at 01:46 AM. Reason: grammar
    To choose the lesser of two evils is still to choose evil. My personal site

  2. #22
    Join Date
    Feb 2009
    Posts
    156
    Thanks
    0
    Thanked 4 Times in 3 Posts

    Default

    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

  3. #23
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    james438 (11-17-2009)

  5. #24
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,239
    Thanks
    96
    Thanked 103 Times in 101 Posts

    Default

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

    Thanks
    To choose the lesser of two evils is still to choose evil. My personal site

  6. #25
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 11-17-2009 at 02:40 PM. Reason: spelling, update code
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #26
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    Quote Originally Posted by gurmeet View Post
    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?

  8. #27
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    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.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  9. #28
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

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

  10. #29
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. #30
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,239
    Thanks
    96
    Thanked 103 Times in 101 Posts

    Default

    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?
    To choose the lesser of two evils is still to choose evil. My personal site

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •