Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2007
    Posts
    277
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Is there any way to wrap text in a textarea in FF?

    Is there any way that I can make a textarea wrap in firefox?
    I've tried this:

    Code:
    calculateLines: function(text){
    	text = text.split('\n').join('');
    
    	temp = '';
    	chcount = tchs = c= 0;
    	do {
    		ch = text.substring(c, c+1); // first character
    		if(ch == '\n'){ // if character is a hard return
    			temp += ch;
    			chcount = 1;
    		} else if(chcount == 9) { // line has max chacters on this line
    			temp += '\n' + ch; // go to next line
    			chcount = 1; // reset chcount
    		} else {// Not a newline or max characters ...
    			temp += ch;
    			chcount++; // so add 1 to chcount
    		}
    	} while(++c<text.length);
    	return temp;
    }
    updateInput: function(){
    	val=this.textarea.val();
    	if($('textarea',this.name).length==0){
    		return false;
    	}
    	lastval=val;
    	if(!val){
    		this.textarea.height(14);
    		return false;
    	}
    	input=this.textarea[0];
    
    	if(document.selection) {
    		r = document.selection.createRange();
    		re = input.createTextRange();
    		rc = re.duplicate();
    		re.moveToBookmark(r.getBookmark());
    		rc.setEndPoint('EndToStart', re);
    
    		lastsel = rc.text.length;
    	} else if(input.selectionStart || input.selectionStart == '0'){
    		lastsel = input.selectionStart;
    	}
    	toomuch=false;
    	if(val.length>199){
    		val=this.textarea.data('val');
    		this.textarea.val(val);
    		--lastsel;
    		toomuch=true;
    	}
    
    	text=this.calculateLines(val);
    	ns=text.split('\n').length;
    	if(this.textarea.data('ns')!=ns){
    		this.textarea.height( ns*14 ).data('ns',ns);
    	}
    
    	if(!toomuch && text!=lastval){
    		this.textarea.val(text);
    
    		tmp=text.split('\n').join('');
    		if(tmp!=lastval && tmp.length<=199 || ns-1==1){
    			if(Math.round(lastsel/10)*10==lastsel){
    				++lastsel;
    			}
    			this.textarea.data('val',text.split('\n').join(''));
    		}
    	}
    	if(!document.selection){
    		input.selectionStart=input.selectionEnd=lastsel;
    	} else {
    		var selRange = input.createTextRange();
    		selRange.collapse(true);
    		selRange.moveStart("character", lastsel);
    		selRange.moveEnd("character", 0);
    		selRange.select();
    		input.focus();
    	}
    }
    I am calling updateInput with this:
    setInterval(function() { self.updateInput() }, 10);

    it's kinda not understandable but maybe someone can figure it out.

    thanks.

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    What you're looking for is the WRAP attribute for textareas. Usually a value of "soft", "hard" or "off", though it won't split a word in two to wrap in the textarea, so a word that is longer than the displayed columns (cols attribute) will not wrap. Try, see how it works for you.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,413
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Code:
    String.prototype.lineWrap=function (colLen, delm) {
        if (!delm) {
            delm = "-\n";
        }
        if (!colLen) {
            colLen = this.length;
        }
        var bs = "";
        var mx = this.length;
        for (i = 0; i < mx; i += colLen) {
            bs += this.slice(i, i + colLen) + delm;
        }
        return bs.slice(0, (bs.length - delm.length));
    }
    arg1 is the # of chars per line
    arg2 (optional )is the delimiter to use between lines, defaults to "-\n"...


    example:
    Code:
    "Hello world, this is JavaScript".wrap(11);
    results:
    Code:
    Hello world-
    , this is J-
    avaScript
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Posts
    277
    Thanks
    2
    Thanked 4 Times in 4 Posts
    That's the problem I want to split a long word, because it is used for an OS files rename system.

  • #5
    Regular Coder
    Join Date
    Oct 2007
    Posts
    277
    Thanks
    2
    Thanked 4 Times in 4 Posts
    rnd me:
    Sorry didn't see that before I posted.

    there is one major problem with your code, and that is that if the user is editing the text and it updates the textarea, the editing poointer goes to the end.

    that's why I'm saving it and placing it back in place.

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,413
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by shedokan View Post
    rnd me:
    Sorry didn't see that before I posted.

    there is one major problem with your code, and that is that if the user is editing the text and it updates the textarea, the editing poointer goes to the end.

    that's why I'm saving it and placing it back in place.
    you could backup the cursor loc just before, and re-apply it just after.

    in firefox it's as simple as
    Code:
    var oldPos = txt.selectionStart.
    // do you stuff
    txt.selectionStart=txt.selectionEnd=oldPos;

    you might want to also backup and restore txt.scrollTop: the vertical scroll position.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  

    Posting Permissions

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