Deprecated: Function set_magic_quotes_runtime() is deprecated in /home4/mfoster/public_html/cb/forums/include/common.php on line 62

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 31

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 32

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 33

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 34
Cross-Browser.com / Tools for textarea manipulation.

Cross-Browser.com

X Library Forums

You are not logged in.

Announcement

New user registration is currently disabled.

#1 January 28, 2010 3:00:37 pm

krumpet
Member
Registered: January 24, 2010
Posts: 19
Website

Tools for textarea manipulation.

Hello,

I am working on some javascript functions to manipulate text in an html textarea.

What I am doing is providing one function say get_text_split(textArea) which returns an object say ta which has 4 properties that contain the text before the selection (ta.pre) the selected text (ta.sel), the text after the selection (ta.post) and a ta.scrollTop.

The user can then manipulate pre, sel and post using just normal string methods.  Then when everything is read, the user calls ta.update()
which will set the text, the selection and the scrollTop in the textArea.

I was wandering, a) is it a rational approach, b) is it of any interest to anyone else but me, and c) would you consider including such functions in the x library?

My current efforts are  on bitbucket under the name kp_textarea.

Thank you for reading this far, and I apologize if this is off topic.

Offline

 

#2 January 28, 2010 7:05:43 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Tools for textarea manipulation.

Hi krumpet,

I think it sounds like a very rational approach  - and yes, it would make a very useful addition to the X Library - thank you for offering to contribute it! smile

Offline

 

#3 January 30, 2010 9:09:13 am

krumpet
Member
Registered: January 24, 2010
Posts: 19
Website

Re: Tools for textarea manipulation.

Thank you smile

The first draft of xtextarea.js, with a coresponding xml file can be found here.

     http://bitbucket.org/krumpet/kp_textarea/src/tip/src/

One function is provided xTextArea(textarea) which accepts a textarea object or a string id refering to one.  The function returns an object conforming to the description in my first post.

A demo using the function can be seen here

     http://kp.hcoop.net/kp/doc/tip/shpaml/js/demo.html

The demo allows higlighted text in the left text box to be shifted left or right using tab/shift-tab keys, and when a newline is inserted the line will be indented to the same level as the one above it.

The code is very new and has had little testing in the wild. I have tested on firefox/opera in linux and firefox/opera/ie6 on windows xp.

I hope someone finds these useful.

Offline

 

#4 January 30, 2010 1:49:01 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Tools for textarea manipulation.

Wow! This is excellent work! I am quite honored by this contribution. Thank you!

You've even filled out the xml file - in fact you've done everything - all I had to do was drop the js and xml files in x/lib and run my "make_index.php". Awesome!

I added the src and demo links in your above post to the xml file. Take a look (xTextArea) and make sure my changes are ok with you.

I look forward to getting into this more - and getting a demo going at this site too.

Again - thanks very much! smile

Offline

 

#5 January 31, 2010 12:59:37 am

krumpet
Member
Registered: January 24, 2010
Posts: 19
Website

Re: Tools for textarea manipulation.

Glad you like it! But the honour is mine. Thank *you* for all the years of work you have put into X.

I hope to be using X a lot in future. I like it especially because you can easily collect the few functions you need for a small project and include them with your own code in a single file. xTextArea, for instance, can easily be bundled with a couple of small X functions and thereafter be independant of X.  I like it also because it doesn't add a lot of junk to native javascript objects.

While looking to see if the functionality I wanted already existed, I came across a couple of appalling 'plugins' for popular frameworks. The ugly contortions they went through to conform to the library made me grimace.  To my mind a library is a slave to the programmer not his master. It should be there when needed and stay out the way when it isn't.  X complies beautifully with my view of the world.

Offline

 

#6 February 1, 2010 8:40:44 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Tools for textarea manipulation.

I'm very glad you like X!

krumpet wrote:

To my mind a library is a slave to the programmer not his master.



I couldn't agree more!  smile

Thanks!

Offline

 

#7 February 4, 2010 4:43:07 am

krumpet
Member
Registered: January 24, 2010
Posts: 19
Website

Re: Tools for textarea manipulation.

It seems I forgot to add xTextArea to the demo on the server when I separated it out.

I have now fixed the problem.

I apologize to those whose time I wasted by directing them to a non functioning demo.

Offline

 

#8 February 11, 2010 8:02:34 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Tools for textarea manipulation.

xTextArea is included in the X 4.21 release!

Offline

 

#9 March 31, 2011 2:17:36 pm

darkmatter
New Member
From: san diego
Registered: March 28, 2011
Posts: 3

Re: Tools for textarea manipulation.

i as well have been working on textareas as input pads. as shown by krumpet there are many obstacles that ie presents.  with that in mind i wrote a crossbrowser implementation for finding the range for a textarea/input element.

see following post

Offline

 

#10 March 31, 2011 2:18:42 pm

darkmatter
New Member
From: san diego
Registered: March 28, 2011
Posts: 3

Re: Tools for textarea manipulation.

//Name         : valuerange
//Arguments    : o = textarea/input object
//                s = optional start of selection
//               e = optional end of selection
//                v = optional value to insert into range
//Description  : selects text in a range or returns the start and end of selection
//                the procedure allows referencing range characters as the
//                same character positions like found in object.value
//                which is pretty troublesome for ie
//Return type  : object {start, end, type}
//Note         : the primary issue is with ie treatment of whitespace in textaeras.
//               so to find the true position in ie you must parse characters to
//               find the whitespace that does not show up in the text.
function valuerange(o /*object*/, s /*optional set start*/, e/*optional set end*/, v/*optional set selection value*/){
    /*
        size determines the length of a of an ie range that
        textrange.text does not capture because of how the selection
        text clips off ending and beginning whitespace
    */
    function size(G){
        var t = G.text
            ,s = t.length;
        if(t > ""){
            while(G.moveEnd("character", -1) && t == G.text)s += 2;
            G.moveEnd("character", 1);
            while(-G.moveStart("character", 1) && t == G.text)s += 2;
        }else{
            while(G.compareEndPoints("StartToEnd", G) < 0){
                G.moveStart("character", 1);
                s += 2;
            }
        }                   
        return s;
    }

    var r
        ,y = "u"    //type=unknown
        ,V = o.value
        ,L = V.length
        ,R = document.selection;
    if(o.selectionStart != null){
        y = "m"    //type=mozilla
        if(s != null){
            o.setSelectionRange(s, e);
        }else{
            s = o.selectionStart;
            e = o.selectionEnd;
        }
    }else if(R){
        y = "i";    //type=ie
        if(s != null){
            r = o.createTextRange();
            r.collapse();
            r.moveStart("character", V.substr(0, s).replace(/\r\n/g, " ").length);
            r.moveEnd("character", V.slice(s, e).replace(/\r\n/g, " ").length);
            r.select();
        }else{
            if(R.createRange().parentElement() != o){
                /*
                    if no text is selected in textarea/input
                    the element must have focus to find the position
                */
                o.focus();
            }
            R = R.createRange();
            if(o.firstChild == null){
                /*
                    input elements have no textnode so moveToElementText
                    produces an uncatchable error
                       
                    this is a lot slower method because of moving one
                    character at a time and comparing endpoints
                */
                r = o.createTextRange();
                r.collapse();
                s = 0;
                while(r.compareEndPoints("StartToStart", R) < 0)s += r.moveStart("character", 1);
                e = s;
                while(r.compareEndPoints("EndToEnd", R) < 0)e += r.moveEnd("character", 1);
            }else{
                r = R.duplicate();
                r.moveToElementText(o);
                r.setEndPoint("StartToEnd", R)
                e = L - size(r);
                s = e - size(R);
            }
        }
    }else{
        //if not a modern browser then go to end
        s = e = L;
    }
    if(v != null){
        if(s == null)s = 0;
        if(e == null)e = s;
        o.value = (V.slice(0, s) + v + V.substr(e)).replace(/\r\n/g, "\n");
        e += o.value.length - L;
        valuerange(o, s, e);    //reselect
    }
    return {start : s, end : e, type : y};
}

Offline

 

#11 March 31, 2011 2:25:26 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Tools for textarea manipulation.

Hi darkmatter, Welcome to the forums!

Hey that looks great! Thanks very much for sharing it with us. I'll be gone tonight but plan on looking at it more closely tomorrow.

Offline

 

#12 April 18, 2011 6:10:37 pm

darkmatter
New Member
From: san diego
Registered: March 28, 2011
Posts: 3

Re: Tools for textarea manipulation.

I have added a simple example of using valuerange as the building block for a textarea editor.

I started this project to get rid of designmode editors and use something simple with just a plain textarea as the editor.  It had to also be something that would not require users to figure out html codes.  This is my first try at the implementation on one of my websites.

The code is not obfuscated so you can easily view it.
VReditor

Offline

 

#13 April 19, 2011 10:23:22 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: Tools for textarea manipulation.

Wow - excellent work! I'm playing around with it

Offline

 

Board footer

Powered by PunBB 1.2.15
Copyright © 2002–2005 Rickard Andersson

Expand Restore Select Format Eval Load