SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    UPDATED (can mozilla reset a textarea scrollbar?) cursor position in a textarea

    I am using the following script that I got from these forums to insert BBcode into a text area with the ID of "writeup".

    Code:
    function ubbc(open, end){ 
        var tArea = document.myform.writeup; 
        var isIE = (document.all)? true : false; 
        var open = (open)? open : ""; 
        var end = (end)? end : ""; 
    
        if(isIE){ 
            tArea.focus(); 
            var curSelect = document.selection.createRange(); 
            if(arguments[2]){ 
                curSelect.text = open + arguments[2] + "]" + curSelect.text + end; 
            } else { 
                curSelect.text = open + curSelect.text + end; 
            } 
        } else if(!isIE && typeof tArea.selectionStart != "undefined"){ 
            var selStart = tArea.value.substr(0, tArea.selectionStart); 
            var selEnd = tArea.value.substr(tArea.selectionEnd, tArea.value.length); 
            var curSelection = tArea.value.replace(selStart, '').replace(selEnd, ''); 
            if(arguments[2]){ 
                tArea.value = selStart + open + arguments[2] + "]" + curSelection + end + selEnd; 
            } else { 
                tArea.value = selStart + open + curSelection + end + selEnd; 
            } 
        } else { 
            tArea.value += (arguments[2])? open + arguments[2] + "]" + end : open + end; 
        } 
    }
    The 'open', and 'end' arguments are the bbcode that goes before and after the selection. The code works GREAT, but it does not return the cursor to the position it started in after the insert. The code above leaves the button that was clicked to invoke it with the focus and when you click back into the text field, the cursor is back at the top.

    Is there a bit of code that could be added to reset the cursor position to a specific spot, maybe the beginning or end of the starting selection text?
    Last edited by Alluvian; May 15, 2007 at 07:41.

  2. #2
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, figured it out. The below text is the new function that resets focus and puts the cursor at the end of the initial selection.

    Just took three newlines, but that took me forever to figure out. All the stuff I can find online talks about the javascript DOM which does not have these controls. Not sure where I was supposed to find a nice listing of the IE and Gecko specific DOM changes/additions.

    Code:
    function ubbc(open, end){ 
        var tArea = document.myform.writeup; 
        var isIE = (document.all)? true : false; 
        var open = (open)? open : ""; 
        var end = (end)? end : ""; 
    
        if(isIE){ 
            tArea.focus(); 
            var curSelect = document.selection.createRange(); 
            if(arguments[2]){ 
                curSelect.text = open + arguments[2] + "]" + curSelect.text + end; 
            } else { 
                curSelect.text = open + curSelect.text + end; 
            }
    //newline
            curSelect.select();
        } else if(!isIE && typeof tArea.selectionStart != "undefined"){
    //newline
    	var pos = tArea.selectionEnd + open.length + end.length;
            var selStart = tArea.value.substr(0, tArea.selectionStart); 
            var selEnd = tArea.value.substr(tArea.selectionEnd, tArea.value.length); 
            var curSelection = tArea.value.replace(selStart, '').replace(selEnd, ''); 
            if(arguments[2]){ 
                tArea.value = selStart + open + arguments[2] + "]" + curSelection + end + selEnd; 
            } else { 
                tArea.value = selStart + open + curSelection + end + selEnd; 
            }
    		tArea.focus();
    //newline
    		tArea.setSelectionRange(pos, pos);
        } else { 
            tArea.value += (arguments[2])? open + arguments[2] + "]" + end : open + end; 
        }
    }

  3. #3
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hrm. Still having a problem for the Mozilla codepath.

    The cursor is resetting fine with these lines:
    tArea.focus();
    tArea.setSelectionRange(pos, pos);

    But, if there is a LOT of text, in the textbox to the point where there is a scrollbar, the scrollbar always jumps to the top when you click on a button.

    Is there any way to check the textarea scrollbar position and reset it after the button click?

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At the start of your firefox branch set a variable-
    var top= tArea.scrollTop,
    and at the end , set tArea.scrollTop=top.
    Last edited by mrhoo; May 15, 2007 at 09:01.

  5. #5
    SitePoint Evangelist Alluvian's Avatar
    Join Date
    Jan 2007
    Location
    Orlando, FL
    Posts
    417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome, I will give that a try when I get home.

    What is a good resource for the browser specific javascript methods/properties. All I can seem to find in searches are things about the DOM, which barely touches textareas. Seems like the standard DOM is very lacking in support for textareas, all I could find that it can do is select all the text. Although it is very possible the few resources I have found have been lacking.

    I just feel bad asking questions I could answer myself with a good reference manual. Without it I am helpless, I would never have known scrollTop even existed.


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
  •