www.webdeveloper.com
Results 1 to 4 of 4

Thread: Can I change the length of a tab offset in text element

  1. #1
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261

    Question Can I change the length of a tab offset in text element

    I found the enableTab() function and added it to the test script below.

    What I would like to know is if it is possible to change the \t offset length from the default 8 characters
    to some other length, like 4 maybe?

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Element Tabulation </title>
    
    </head>
    <body>
    <textarea id="TArea" cols="80" rows="10"></textarea>
    <br><button onclick="document.getElementById('TArea').value += '----+'.strCreate(72)+'\n'"> ----+ </button>
        <button onclick="document.getElementById('TArea').value += '1\t2\t3\t4\t5\t6\t7\t8\t9\t0\n'"> 1...0 </button>
    
    <script type="text/javascript">
    String.prototype.strCreate = function(N) {  // N = length of this string pattern to create
      var str = '';
      while (str.length < N) { str += this; }
      return str.substring(0,N);
    }
    
    // Following from: http://css-tricks.com/snippets/javascript/support-tabs-in-textareas/
    function enableTab(id) {
        var el = document.getElementById(id);
        el.onkeydown = function(e) {
            if (e.keyCode === 9) { // tab was pressed
    
                // get caret position/selection
                var val = this.value,
                    start = this.selectionStart,
                    end = this.selectionEnd;
    
                // set textarea value to: text before caret + tab + text after caret
                this.value = val.substring(0, start) + '\t' + val.substring(end);
    
                // put caret at right position again
                this.selectionStart = this.selectionEnd = start + 1;
    
                // prevent the focus lose
                return false;
    
            }
        };
    }
    window.onload = function() {
      enableTab('TArea');
    }
    </script>
    
    </body>
    </html>

  2. #2
    Join Date
    Dec 2013
    Posts
    63
    There is tab-size property (CSS3).

    Currently it's only implemented in Firefox and Opera (with vendor prefixes).
    textarea {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    }

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261

    Wink

    Quote Originally Posted by blasphemy View Post
    There is tab-size property (CSS3).

    Currently it's only implemented in Firefox and Opera (with vendor prefixes).
    textarea {
    -moz-tab-size: 4;
    -o-tab-size: 4;
    }
    Thank you for that information.

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,036
    Only thing I can suggest is to use a RegExp to test and replace all \t characters with x spaces.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles