J'ai un simple textarea html de mon côté. En ce moment, si vous cliquez sur l'onglet, cela passe au champ suivant. Je voudrais plutôt que le bouton de tabulation indente quelques espaces. Comment puis-je faire ceci? Merci.
J'ai un simple textarea html de mon côté. En ce moment, si vous cliquez sur l'onglet, cela passe au champ suivant. Je voudrais plutôt que le bouton de tabulation indente quelques espaces. Comment puis-je faire ceci? Merci.
Réponses:
Emprunter beaucoup d'autres réponses pour des questions similaires (affichées ci-dessous) ...
$(document).delegate('#textbox', 'keydown', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var start = this.selectionStart;
var end = this.selectionEnd;
// set textarea value to: text before caret + tab + text after caret
$(this).val($(this).val().substring(0, start)
+ "\t"
+ $(this).val().substring(end));
// put caret at right position again
this.selectionStart =
this.selectionEnd = start + 1;
}
});
jQuery: Comment capturer la pression de touche TAB dans une zone de texte
var textareas = document.getElementsByTagName('textarea');
var count = textareas.length;
for(var i=0;i<count;i++){
textareas[i].onkeydown = function(e){
if(e.keyCode==9 || e.which==9){
e.preventDefault();
var s = this.selectionStart;
this.value = this.value.substring(0,this.selectionStart) + "\t" + this.value.substring(this.selectionEnd);
this.selectionEnd = s+1;
}
}
}
Cette solution ne nécessite pas jQuery et activera la fonctionnalité d'onglet sur toutes les zones de texte d'une page.
this.selectionEnd = s+1;
par this.selectionEnd = s + "\t".length;
. Il serait plus simple d'utiliser une variable ou un paramètre de fonction et d'y stocker le (s) caractère (s) d'indentation. Mais vous savez quoi remplacer maintenant: Le +1
définit combien de caractères le curseur est déplacé.
KeyboardEvent.keyCode
et KeyboardEvent.which
sont des propriétés obsolètes. Utilisez KeyboardEvent.key
plutôt.
Comme d'autres l'ont écrit, vous pouvez utiliser JavaScript pour capturer l'événement, empêcher l'action par défaut (afin que le curseur ne déplace pas le focus) et insérer un caractère de tabulation.
Cependant , la désactivation du comportement par défaut rend impossible le déplacement du focus hors de la zone de texte sans utiliser de souris. Les utilisateurs aveugles interagissent avec les pages Web à l'aide du clavier et de rien d'autre - ils ne peuvent pas voir le pointeur de la souris pour faire quoi que ce soit d'utile, donc c'est le clavier ou rien d'autre. La touche de tabulation est le principal moyen de naviguer dans le document, et en particulier dans les formulaires. Remplacer le comportement par défaut de la touche de tabulation rendra impossible pour les utilisateurs aveugles de déplacer le focus vers l'élément de formulaire suivant.
Donc, si vous écrivez un site Web pour un large public, je vous recommande de ne pas le faire sans raison impérieuse et de fournir une sorte d'alternative aux utilisateurs aveugles qui ne les piège pas dans la zone de texte.
Pour ce que ça vaut, voici mon oneliner, pour ce dont vous avez tous parlé dans ce fil:
<textarea onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}">
</textarea>
Testé dans les dernières éditions de Chrome, Firefox, Internet Explorer et Edge.
if(event.shiftKey){if(v.substring(s-1,s)==='\t'){this.value=v.substring(0,s-1)+v.substring(e);this.selectionStart=this.selectionEnd=s-1;}}
Voici ma version de ceci, prend en charge:
$(function() {
var enabled = true;
$("textarea.tabSupport").keydown(function(e) {
// Escape key toggles tab on/off
if (e.keyCode==27)
{
enabled = !enabled;
return false;
}
// Enter Key?
if (e.keyCode === 13 && enabled)
{
// selection?
if (this.selectionStart == this.selectionEnd)
{
// find start of the current line
var sel = this.selectionStart;
var text = $(this).val();
while (sel > 0 && text[sel-1] != '\n')
sel--;
var lineStart = sel;
while (text[sel] == ' ' || text[sel]=='\t')
sel++;
if (sel > lineStart)
{
// Insert carriage return and indented text
document.execCommand('insertText', false, "\n" + text.substr(lineStart, sel-lineStart));
// Scroll caret visible
this.blur();
this.focus();
return false;
}
}
}
// Tab key?
if(e.keyCode === 9 && enabled)
{
// selection?
if (this.selectionStart == this.selectionEnd)
{
// These single character operations are undoable
if (!e.shiftKey)
{
document.execCommand('insertText', false, "\t");
}
else
{
var text = this.value;
if (this.selectionStart > 0 && text[this.selectionStart-1]=='\t')
{
document.execCommand('delete');
}
}
}
else
{
// Block indent/unindent trashes undo stack.
// Select whole lines
var selStart = this.selectionStart;
var selEnd = this.selectionEnd;
var text = $(this).val();
while (selStart > 0 && text[selStart-1] != '\n')
selStart--;
while (selEnd > 0 && text[selEnd-1]!='\n' && selEnd < text.length)
selEnd++;
// Get selected text
var lines = text.substr(selStart, selEnd - selStart).split('\n');
// Insert tabs
for (var i=0; i<lines.length; i++)
{
// Don't indent last line if cursor at start of line
if (i==lines.length-1 && lines[i].length==0)
continue;
// Tab or Shift+Tab?
if (e.shiftKey)
{
if (lines[i].startsWith('\t'))
lines[i] = lines[i].substr(1);
else if (lines[i].startsWith(" "))
lines[i] = lines[i].substr(4);
}
else
lines[i] = "\t" + lines[i];
}
lines = lines.join('\n');
// Update the text area
this.value = text.substr(0, selStart) + lines + text.substr(selEnd);
this.selectionStart = selStart;
this.selectionEnd = selStart + lines.length;
}
return false;
}
enabled = true;
return true;
});
});
textarea
{
width: 100%;
height: 100px;
tab-size: 4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="tabSupport">if (something)
{
// This textarea has "tabSupport" CSS style
// Try using tab key
// Try selecting multiple lines and using tab and shift+tab
// Try pressing enter at end of this line for auto indent
// Use Escape key to toggle tab support on/off
// eg: press Escape then Tab to go to next field
}
</textarea>
<textarea>This text area doesn't have tabSupport class so disabled here</textarea>
De manière moderne, les deux sont simples et ne perdent pas la possibilité d'annuler (Ctrl + Z) les dernières modifications.
$('#your-textarea').keydown(function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode === $.ui.keyCode.TAB) {
e.preventDefault();
const TAB_SIZE = 4;
// The one-liner that does the magic
document.execCommand('insertText', false, ' '.repeat(TAB_SIZE));
}
});
En savoir plus execCommand
:
Comme indiqué dans le commentaire (et bien que ce fût autrefois une solution «moderne» ), la fonctionnalité est devenue obsolète. Citant les documents:
Cette fonctionnalité est obsolète. Bien qu'il puisse toujours fonctionner dans certains navigateurs, son utilisation est déconseillée car il peut être supprimé à tout moment. Essayez d'éviter de l'utiliser.
indent-textarea
une solution multi-navigateurs qui utilise cette méthode + une solution de secours dans Firefox.
document.execCommand
ne devient activé qu'après la configuration document.designMode = "on";
. Je suis capable de faire écrire du texte dans des éléments qui ont .contentEditable = 'true'
. Cependant, lorsque j'essaie d'accomplir cela sur une zone de texte, le textNode inséré est placé juste avant la zone de texte dans le document (au lieu de dans la zone de texte). Veuillez essayer d'aider Mozilla à comprendre cela ici .
execCommand
): «Cette fonctionnalité est obsolète. Bien qu'il puisse toujours fonctionner dans certains navigateurs, son utilisation est déconseillée car il peut être supprimé à tout moment. Essayez d'éviter de l'utiliser.
Je n'allais nulle part rapidement en essayant d'utiliser la réponse de @ kasdega dans un environnement AngularJS, rien de ce que j'ai essayé ne semblait capable de faire agir Angular sur le changement. Donc, au cas où cela serait utile aux passants, voici une réécriture du code de @ kasdega, style AngularJS, qui a fonctionné pour moi:
app.directive('ngAllowTab', function () {
return function (scope, element, attrs) {
element.bind('keydown', function (event) {
if (event.which == 9) {
event.preventDefault();
var start = this.selectionStart;
var end = this.selectionEnd;
element.val(element.val().substring(0, start)
+ '\t' + element.val().substring(end));
this.selectionStart = this.selectionEnd = start + 1;
element.triggerHandler('change');
}
});
};
});
et:
<textarea ng-model="mytext" ng-allow-tab></textarea>
element.triggerHandler('change');
, sinon le modèle ne sera pas mis à jour (à cause du element.triggerHandler('change');
je pense.
Vous devez écrire du code JS pour attraper la pression de la touche TAB et insérer un tas d'espaces. Quelque chose de similaire à ce que fait JSFiddle.
Vérifiez jquery fiddle :
HTML :
<textarea id="mybox">this is a test</textarea>
JavaScript :
$('#mybox').live('keydown', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
alert('tab pressed');
}
});
event.preventDefault();
e.keyCode || e.which
.
Script d'indétation sur plusieurs lignes basé sur la solution @kasdega.
$('textarea').on('keydown', function (e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 9) {
e.preventDefault();
var start = this.selectionStart;
var end = this.selectionEnd;
var val = this.value;
var selected = val.substring(start, end);
var re = /^/gm;
var count = selected.match(re).length;
this.value = val.substring(0, start) + selected.replace(re, '\t') + val.substring(end);
this.selectionStart = start;
this.selectionEnd = end + count;
}
});
start === end
.
Cette solution permet de tabuler dans une sélection entière comme votre éditeur de code typique, et de supprimer cette sélection également. Cependant, je n'ai pas compris comment implémenter shift-tab quand il n'y a pas de sélection.
$('#txtInput').on('keydown', function(ev) {
var keyCode = ev.keyCode || ev.which;
if (keyCode == 9) {
ev.preventDefault();
var start = this.selectionStart;
var end = this.selectionEnd;
var val = this.value;
var selected = val.substring(start, end);
var re, count;
if(ev.shiftKey) {
re = /^\t/gm;
count = -selected.match(re).length;
this.value = val.substring(0, start) + selected.replace(re, '') + val.substring(end);
// todo: add support for shift-tabbing without a selection
} else {
re = /^/gm;
count = selected.match(re).length;
this.value = val.substring(0, start) + selected.replace(re, '\t') + val.substring(end);
}
if(start === end) {
this.selectionStart = end + count;
} else {
this.selectionStart = start;
}
this.selectionEnd = end + count;
}
});
#txtInput {
font-family: monospace;
width: 100%;
box-sizing: border-box;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txtInput">
$(document).ready(function(){
$("#msgid").html("This is Hello World by JQuery");
});
</textarea>
if (selected.length > 0) {...}
Fiddle: jsfiddle.net/jwfkbjkr
Sur la base de tout ce que les gens avaient à dire ici sur les réponses, c'est juste une combinaison de keydown (pas de keyup) + preventDefault () + insérez un caractère de tabulation au curseur. Quelque chose comme:
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
insertAtCaret('txt', '\t')
}
La réponse précédente avait un jsfiddle fonctionnel mais il utilisait une alerte () lors du keydown. Si vous supprimez cette alerte, cela n'a pas fonctionné. Je viens d'ajouter une fonction pour insérer une tabulation à la position actuelle du curseur dans la zone de texte.
Voici un jsfiddle fonctionnel pour le même: http://jsfiddle.net/nsHGZ/
Je vois que ce sujet n'est pas résolu. J'ai codé ceci et cela fonctionne très bien. Il insère une tabulation à l'index du curseur. Sans utiliser jquery
<textarea id="myArea"></textarea>
<script>
document.getElementById("myArea").addEventListener("keydown",function(event){
if(event.code==="Tab"){
var cIndex=this.selectionStart;
this.value=[this.value.slice(0,cIndex),//Slice at cursor index
"\t", //Add Tab
this.value.slice(cIndex)].join('');//Join with the end
event.stopPropagation();
event.preventDefault(); //Don't quit the area
this.selectionStart=cIndex+1;
this.selectionEnd=cIndex+1; //Keep the cursor in the right index
}
});
</script>
J'en ai créé un auquel vous pouvez accéder avec n'importe quel élément textarea que vous aimez:
function textControl (element, event)
{
if(event.keyCode==9 || event.which==9)
{
event.preventDefault();
var s = element.selectionStart;
element.value = element.value.substring(0,element.selectionStart) + "\t" + element.value.substring(element.selectionEnd);
element.selectionEnd = s+1;
}
}
Et l'élément ressemblerait à ceci:
<textarea onkeydown="textControl(this,event)"></textarea>
Le moyen le plus simple que j'ai trouvé de faire cela dans les navigateurs modernes avec JavaScript vanilla est:
<textarea name="codebox"></textarea>
<script>
const codebox = document.querySelector("[name=codebox]")
codebox.addEventListener("keydown", (e) => {
let { keyCode } = e;
let { value, selectionStart, selectionEnd } = codebox;
if (keyCode === 9) { // TAB = 9
e.preventDefault();
codebox.value = value.slice(0, selectionStart) + "\t" + value.slice(selectionEnd);
codebox.setSelectionRange(selectionStart+2, selectionStart+2)
}
});
</script>
Notez que j'ai utilisé de nombreuses fonctionnalités ES6 dans cet extrait de code par souci de simplicité, vous voudrez probablement le transpiler (avec Babel ou TypeScript) avant de le déployer.
Ce qui précède répond à tous les effacer l'historique des annulations Pour tous ceux qui recherchent une solution qui ne le fait pas, j'ai passé la dernière heure à coder ce qui suit pour Chrome:
jQuery.fn.enableTabs = function(TAB_TEXT){
// options
if(!TAB_TEXT)TAB_TEXT = '\t';
// text input event for character insertion
function insertText(el, text){
var te = document.createEvent('TextEvent');
te.initTextEvent('textInput', true, true, null, text, 9, "en-US");
el.dispatchEvent(te);
}
// catch tab and filter selection
jQuery(this).keydown(function(e){
if((e.which || e.keyCode)!=9)return true;
e.preventDefault();
var contents = this.value,
sel_start = this.selectionStart,
sel_end = this.selectionEnd,
sel_contents_before = contents.substring(0, sel_start),
first_line_start_search = sel_contents_before.lastIndexOf('\n'),
first_line_start = first_line_start_search==-1 ? 0 : first_line_start_search+1,
tab_sel_contents = contents.substring(first_line_start, sel_end),
tab_sel_contents_find = (e.shiftKey?new RegExp('\n'+TAB_TEXT, 'g'):new RegExp('\n', 'g')),
tab_sel_contents_replace = (e.shiftKey?'\n':'\n'+TAB_TEXT);
tab_sel_contents_replaced = (('\n'+tab_sel_contents)
.replace(tab_sel_contents_find, tab_sel_contents_replace))
.substring(1),
sel_end_new = first_line_start+tab_sel_contents_replaced.length;
this.setSelectionRange(first_line_start, sel_end);
insertText(this, tab_sel_contents_replaced);
this.setSelectionRange(first_line_start, sel_end_new);
});
};
En bref, des onglets sont insérés au début des lignes sélectionnées.
JSFiddle: http://jsfiddle.net/iausallc/5Lnabspr/11/
Gist: https://gist.github.com/iautomation/e53647be326cb7d7112d
Exemple d'utilisation: $('textarea').enableTabs('\t')
Inconvénients: ne fonctionne que sur Chrome tel quel.
Il existe une bibliothèque sur Github pour la prise en charge des onglets dans vos zones de texte par wjbryant: Tab Override
Voilà comment cela fonctionne:
// get all the textarea elements on the page
var textareas = document.getElementsByTagName('textarea');
// enable Tab Override for all textareas
tabOverride.set(textareas);
En tant qu'option du code de kasdega ci-dessus, au lieu d'ajouter l'onglet à la valeur actuelle, vous pouvez à la place insérer des caractères au point actuel du curseur. Cela a l'avantage de:
alors remplacez
// set textarea value to: text before caret + tab + text after caret
$(this).val($(this).val().substring(0, start)
+ "\t"
+ $(this).val().substring(end));
avec
// set textarea value to: text before caret + tab + text after caret
document.execCommand("insertText", false, ' ');
if (e.which == 9) {
e.preventDefault();
var start = $(this).get(0).selectionStart;
var end = $(this).get(0).selectionEnd;
if (start === end) {
$(this).val($(this).val().substring(0, start)
+ "\t"
+ $(this).val().substring(end));
$(this).get(0).selectionStart =
$(this).get(0).selectionEnd = start + 1;
} else {
var sel = $(this).val().substring(start, end),
find = /\n/g,
count = sel.match(find) ? sel.match(find).length : 0;
$(this).val($(this).val().substring(0, start)
+ "\t"
+ sel.replace(find, "\n\t")
+ $(this).val().substring(end, $(this).val().length));
$(this).get(0).selectionStart =
$(this).get(0).selectionEnd = end+count+1;
}
}
Essayez cette fonction jQuery simple:
$.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();
J'ai dû créer une fonction pour faire de même, c'est simple à utiliser, copiez simplement ce code dans votre script et utilisez: enableTab( HTMLElement )
HTMLelement étant quelque chose commedocument.getElementById( id )
function enableTab(t){t.onkeydown=function(t){if(9===t.keyCode){var e=this.value,n=this.selectionStart,i=this.selectionEnd;return this.value=e.substring(0,n)+" "+e.substring(i),this.selectionStart=this.selectionEnd=n+1,!1}}}
Chaque entrée d'un élément textarea a un événement onkeydown. Dans le gestionnaire d'événements, vous pouvez empêcher la réaction par défaut de la touche de tabulation en utilisant event.preventDefault () chaque fois que event.keyCode vaut 9.
Ensuite, placez un signe de tabulation dans la bonne position:
function allowTab(input)
{
input.addEventListener("keydown", function(event)
{
if(event.keyCode == 9)
{
event.preventDefault();
var input = event.target;
var str = input.value;
var _selectionStart = input.selectionStart;
var _selectionEnd = input.selectionEnd;
str = str.substring(0, _selectionStart) + "\t" + str.substring(_selectionEnd, str.length);
_selectionStart++;
input.value = str;
input.selectionStart = _selectionStart;
input.selectionEnd = _selectionStart;
}
});
}
window.addEventListener("load", function(event)
{
allowTab(document.querySelector("textarea"));
});
html
<textarea></textarea>
$("textarea").keydown(function(event) {
if(event.which===9){
var cIndex=this.selectionStart;
this.value=[this.value.slice(0,cIndex),//Slice at cursor index
"\t", //Add Tab
this.value.slice(cIndex)].join('');//Join with the end
event.stopPropagation();
event.preventDefault(); //Don't quit the area
this.selectionStart=cIndex+1;
this.selectionEnd=cIndex+1; //Keep the cursor in the right index
}
});
Script autonome simple:
textarea_enable_tab_indent = function(textarea) {
textarea.onkeydown = function(e) {
if (e.keyCode == 9 || e.which == 9){
e.preventDefault();
var oldStart = this.selectionStart;
var before = this.value.substring(0, this.selectionStart);
var selected = this.value.substring(this.selectionStart, this.selectionEnd);
var after = this.value.substring(this.selectionEnd);
this.value = before + " " + selected + after;
this.selectionEnd = oldStart + 4;
}
}
}
Si vous avez vraiment besoin d'onglets, copiez un onglet à partir de Word ou du bloc-notes et collez-le dans la zone de texte où vous le souhaitez
1 2 3
12 22 33
Malheureusement, je pense qu'ils suppriment les onglets de ces commentaires :) Il apparaîtra comme% 09 dans votre POST ou GET