1. #1
    Ext User
    Join Date
    Mar 2010
    Posts
    7
    Vote Rating
    0
    ajlaluan is on a distinguished road

      0  

    Default Allow tab key in TextArea

    Allow tab key in TextArea


    Hi gurus,

    Can anyone help me out in allowing tab key in a textarea or textfield?

    I tried this code from this site: http://www.codebooth.com/snippets/1
    The code works but the problem is that the cursor goes to the address bar of the browser or to any buttons present in my form after invoking the function. I tried it in IE6, IE7, and Firefox 3.0.

    Here's a portion of my code:
    Code:
    {
        id: 'css_content'
        ,name: 'css_content'
        ,xtype: 'textarea'
        ,hideLabel: true
        ,enableKeyEvents: true
        ,listeners: {
            keydown: function(field, e) {
                if (e.getKey() == e.TAB) {
                    allowTab(field, e);
                    return false;
                }
            }
        }
    }
    Hoping for some help out there.

    Thanks in advance.

  2. #2
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    you need e.stopPropagation(); after your insert.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #3
    Ext User
    Join Date
    Mar 2010
    Posts
    7
    Vote Rating
    0
    ajlaluan is on a distinguished road

      0  

    Default


    Hi steffenk,

    Thanks for the reply.

    Tried it but it seems that I encountered the same action. Tho, not sure if I put the code in the right place ( ). Here's where I put the code:


    Code:
    ,listeners: {
      keydown: function(field, e) {
          if (e.getKey() == e.TAB) {
              allowTab(field, e);
              e.stopPropagation();
              return false;
          }
      }
    }

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    52
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It's preventDefault which needs to happen. That prevents the browser default action (going to the next input field)

    stopPropagation stops bubbling IIRC.

    But stopEvent does both, so that's what I use most of the time.

  5. #5
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    you are right Animal, stopPropagation stops bubbling.

    The original code doesn't work that way, the helper function can't handle the Ext element.
    This is working:
    Code:
    keydown: function(textfield, event) {
    	if (event.getKey() == event.TAB) {
    		allowTab(textfield.el.dom, event);
    		event.stopEvent();
    	}
    }
    see live example:
    http://dev.sk-typo3.de/ext/tab.html
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  6. #6
    Ext User
    Join Date
    Mar 2010
    Posts
    7
    Vote Rating
    0
    ajlaluan is on a distinguished road

      0  

    Thumbs up


    Problem solved!!!

    Thanks to you guys (animal and steffenk) ( )

    You guys rock...

  7. #7
    Sencha User
    Join Date
    Jun 2010
    Posts
    37
    Vote Rating
    1
    rleinen is on a distinguished road

      0  

    Default


    Steffenk: This works fine in Firefox (Mac), but not Safari (Mac). Any ideas why not?

  8. #8
    Sencha User
    Join Date
    Jun 2012
    Location
    Treviso
    Posts
    3
    Vote Rating
    1
    tecnico12 is on a distinguished road

      0  

    Default complete code

    complete code


    This is the code for allow key tab in textarea. This work in Extks 4.1

    Code:
    {xtype:'textarea', name:'script', fieldLabel: 'Script:', 
      fieldStyle: { 'fontFamily': 'Courier', 'fontSize': '12px', 'white-space': 'pre'},
      listeners: {
            specialkey: function(field, e){
                    if (e.getKey() == e.TAB) {
                         e.stopEvent();
                         var el = field.inputEl.dom;
                         if (el.setSelectionRange) {
                                var withIns = el.value.substring(0, el.selectionStart) + '    ';
                                var pos = withIns.length;
                                el.value = withIns + el.value.substring(el.selectionEnd, el.value.length);
                                 el.setSelectionRange(pos, pos);
                          }
                          else if (document.selection) {
                                   document.selection.createRange().text = '    ';
                               }
                     }
                 }
       }
    }