Onglet dans une zone de texte sans changer de focus, jQuery

Question

Étant donné une zone de texte, est-il possible d'utiliser jQuery pour permettre aux utilisateurs d'utiliser la touche «tabulation» qui en fait ..insère une tabulation, au lieu de se concentrer sur l'élément de formulaire suivant sur la page?

J'ai suivi Capturing TAB key in text box et bien que cela fonctionne, je cherche à l'intégrer dans un plugin jQuery pour rendre un onglet tabable spécifique. Le problème est, je ne comprends pas entièrement comment appliquer le concept de ces «auditeurs» aux objets qui correspondent à jQuery.

Quelqu'un at-il des pistes sur où je pourrais commencer?

Answer 1

Je viens d'écrire un plugin jQuery pour ce faire qui fonctionne dans tous les principaux navigateurs. Il utilise keydown et keypress pour lier les écouteurs d'événement à un ensemble d'éléments. Les écouteurs d'événement empêchent le comportement par défaut de la touche Tab, tandis que le module d'écoute keydown insère également manuellement un caractère de tabulation sur le signe insertion/sélection.

Ici, il est en action: http://www.jsfiddle.net/8segz/

Voici un exemple d'utilisation:

$(function() { 
    $("textarea").allowTabChar(); 
}); 

Voici le plug-in code:

(function($) { 
    function pasteIntoInput(el, text) { 
     el.focus(); 
     if (typeof el.selectionStart == "number") { 
      var val = el.value; 
      var selStart = el.selectionStart; 
      el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd); 
      el.selectionEnd = el.selectionStart = selStart + text.length; 
     } else if (typeof document.selection != "undefined") { 
      var textRange = document.selection.createRange(); 
      textRange.text = text; 
      textRange.collapse(false); 
      textRange.select(); 
     } 
    } 

    function allowTabChar(el) { 
     $(el).keydown(function(e) { 
      if (e.which == 9) { 
       pasteIntoInput(this, "\t"); 
       return false; 
      } 
     }); 

     // For Opera, which only allows suppression of keypress events, not keydown 
     $(el).keypress(function(e) { 
      if (e.which == 9) { 
       return false; 
      } 
     }); 
    } 

    $.fn.allowTabChar = function() { 
     if (this.jquery) { 
      this.each(function() { 
       if (this.nodeType == 1) { 
        var nodeName = this.nodeName.toLowerCase(); 
        if (nodeName == "textarea" || (nodeName == "input" && this.type == "text")) { 
         allowTabChar(this); 
        } 
       } 
      }) 
     } 
     return this; 
    } 
})(jQuery); 

Answer 2

Demandez votre plugin faire quelque chose comme ceci:

$(inputElementSelector).keypress(function(event) { 
    if (event.keyCode == 9) { 
     //enter your tab behavior here 
    } 
} 

Answer 3

passer ce fonction d'un sélecteur jQuery qui correspond à la éléments dans lesquels vous voulez activer le caractère Tab. Par exemple: BindTabKeyAsCharacter (". about_us textarea");

function BindTabKeyAsCharacter(selector) { 
    $(document).ready(function() { 
     $(selector).each(function() { 
      $(this).keydown(function() { 
       var e = (window.event) ? event : e; 
       if (e.keyCode == 9) { // Tab 
        if (window.event) { 
         window.event.returnValue = false; 
        } 
        else { 
         if (e.cancelable) { e.preventDefault(); } 
        } 
        var before, after; 
        if (document.selection) { 
         this.selection = document.selection.createRange(); 
         this.selection.text = String.fromCharCode(9); 
        } else { 
         before = this.value.substring(0, this.selectionStart); 
         after = this.value.substring(this.selectionEnd,  this.value.length); 
         this.value = before + String.fromCharCode(9) + after; 
        } 
        var newCursorPos = before.length + String.fromCharCode(9).length; 
        if (this.setSelectionRange) { 
         this.focus(); 
         this.setSelectionRange(newCursorPos, newCursorPos); 
        } else if (this.createTextRange) { 
         var range = this.createTextRange(); 
         range.collapse(true); 
         range.moveEnd('character', newCursorPos); 
         range.moveStart('character', newCursorPos); 
         range.select(); 
        } 
       } 
      }); 
     }); 
    }); 
} 

Answer 4

Essayez cette simple fonction jQuery:

$.fn.getTab = function() { 
    this.keydown(function (e) { 
     if (e.keyCode === 9) { 
      var val = this.value, 
       start = this.selectionStart, 
       end = this.selectionEnd; 
      this.value = val.substring(0, start) + '\t' + val.substring(end); 
      this.selectionStart = this.selectionEnd = start + 1; 
      return false; 
     } 
     return true; 
    }); 
    return this; 
}; 

$("textarea").getTab(); 
// You can also use $("input").getTab(); 

Answer 5

Pour le code de Tim bas: Je l'ai utilisé dans mon projet et a obtenu un bug étrange. Lorsque j'insère un espace simple au début d'une ligne, le contenu ne sera pas mis à jour après l'envoi. J'ai eu beaucoup de jQuery et Ajax Code dans mon projet pour les textareas. Mais preventDefault() a résolu mon bug:

... 
function allowTabChar(el) { 
    $(el).keydown(function(e) { 
     if (e.which == 9) { 
      pasteIntoInput(this, \"\t\"); 
      e.preventDefault(); // <- I had to add this 
      $(el).change();  // To fire change event for my Ajax Code 
      return false; 
     } 
    }); 
...