SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tabbing inside textarea

    Folks,

    Hopefully a simple question for the person who already knows the answer.

    How do you prevent the default HTML form behavior where hitting the tab
    key causes focus to shift to the next entity in the form? I want to make
    it possible for the user to type tabs into the text area and submit that
    text when entering "code examples". I can't seem to track down an answer
    to the problem, though. At first I thought I could use some sort of onblur
    handler on the textarea to suppress the behavior, then I found a few hints
    that it could be done with CSS styling on the textarea, but nothing has
    panned out as I've tried to track it down.

    regards,
    Jim

  2. #2
    SitePoint Evangelist ramone_johnny's Avatar
    Join Date
    Jan 2004
    Location
    Brisbane - Australia
    Posts
    434
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Why post the same question 3 times over????

  3. #3
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not sure if this has already been answered:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function setup() {
                    var d = document.getElementById('test');
                    d.onkeydown = function(e) {
                        if(!e) e = window.event;
                        var key = (e.which) ? e.which : e.keyCode;
                        if(key == 9) {
                            d.value += '\t';
                            return false;
                        }
                        return true;
                    }
                }
                window.onload = setup;
            </script>
        </head>
        <body>
            
            <textarea style="width: 600px;height: 300px;" id="test"></textarea>
    
        </body>
    </html>


  4. #4
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    not sure if this has already been answered:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function setup() {
                    var d = document.getElementById('test');
                    d.onkeydown = function(e) {
                        if(!e) e = window.event;
                        var key = (e.which) ? e.which : e.keyCode;
                        if(key == 9) {
                            d.value += '\t';
                            return false;
                        }
                        return true;
                    }
                }
                window.onload = setup;
            </script>
        </head>
        <body>
            
            <textarea style="width: 600px;height: 300px;" id="test"></textarea>
    
        </body>
    </html>
    I attempted something similar to this after I posted the original message:

    Code:
    <script type="text/javascript">
    function captureTabs( evt )
    {
            ta = document.getElementById('contentid');
            /* alert( evt.keyCode ); */
            if( evt.keyCode == 9 ) {
                    /* alert( evt.target.id ); */
                    ta.value += '\t';
                    evt.returnValue = false;
                    return false;
            }
            return true;
    }
    </script>
    
    <textarea id="contentid" name="content" onkeydown="captureTabs( event);" style="width: 98&#37;; height: 300px"></textarea>
    It does not work. Hitting the tab key immediately moves focus to the next element in the form. I don't see any significant difference between our code except that I'm setting the returnValue on the event to false. I can try your code, but have you actually tested it? I don't think it will work...

    thanks,
    Jim

  5. #5
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works in Firefox better then it does in IE but I can confirm that it works in both.


  6. #6
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    It works in Firefox better then it does in IE but I can confirm that it works in both.
    Tried your code as well, still not working. I see that it is in fact adding a tab to the content of the textarea, but the focus still shifts to the next element. I've tried adding in:

    Code:
    evt.cancelBubble = true;
    if( evt.stopPropagation ) evt.stopPropagation();
    But it makes no difference. Sort of stumped at this point. I found some references while googling that suggested you could set CSS styling on the textarea to facilitate this somehow, but couldn't find anything concrete no matter what searches I tried. Nothing about it in my CSS book either. Maybe someone in the CSS forum will reply.

    thanks,
    Jim

  7. #7
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not a good idea to override the tab key, since some users need it to navigate.

    I listen for keydowns in a textarea and replace a Shift+Space combination with '\t' . You could ask your users to do the same, or to type the '\t' where they want a tab.

  8. #8
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mrhoo View Post
    It's not a good idea to override the tab key, since some users need it to navigate.

    I listen for keydowns in a textarea and replace a Shift+Space combination with '\t' . You could ask your users to do the same, or to type the '\t' where they want a tab.
    I would like to be able to do something like that, but in this case, I really need to be able to use the tab key. Often text will be getting pasted into the textarea from external documents, and it's just not practical to use the solution you suggest. Yes, I realize it's an accessibility no-no, but this is a special purpose, internal site being used by a small group and that's just not an issue.

    thanks,
    Jim

  9. #9
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    strange as in Vista using Firefox 2 and IE 7 I am having no problems, in my example on only have on element that will need focus, so I added another and it still stays.

    Can you post the html of the page your testing it on?


  10. #10
    SitePoint Member
    Join Date
    Aug 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gRoberts View Post
    strange as in Vista using Firefox 2 and IE 7 I am having no problems, in my example on only have on element that will need focus, so I added another and it still stays.

    Can you post the html of the page your testing it on?
    I'm doing the development using Firefox 1.5 running on Debian Etch. I'll see if I can extract the relevant portions of the page, but the whole thing would be a mess to post into a forum. I have already verified that there are no duplicate element IDs, if that's what you're thinking.

    At this point, I've burned as much time as I can permit myself on this issue, and I have to switch over to something else before it gets too late in the day. Many thanks to you for your help on this. I should be able to devote some more time to this tomorrow or Tuesday, I'll get back with additional info then.

    thanks,
    Jim

  11. #11
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jim,

    By all means, if you wish to let me have a look without posting it in an open forum, use the PM Feature.



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
  •