Використовуйте вкладку для відступу в текстовій області

У мене простий html textarea на моєму боці. Зараз, якщо ви клацнете на ньому вкладку, вона переходить до наступного поля. Я хотів би зробити на кнопці вкладки відступ на кілька пробілів. Як я можу це зробити? Дякую.

Позики в значній мірі з інших відповідей на подібні запитання (розміщені нижче) ...

$(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: Як захопити натискання клавіші TAB в текстовому полі

Як поводитися з <tab> в textarea?

http://jsfiddle.net/jz6J5/

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; 
        }
    }
}

Це рішення не потребує jQuery і дозволить функціонувати вкладки на всіх текстових областях сторінки.

Як написали інші, ви можете використовувати JavaScript для зйомки події, запобігання дії за замовчуванням (щоб курсор не зміщував фокус) і вставляв символ вкладки.

Але вимкнення поведінки за замовчуванням унеможливлює переміщення фокусу з області тексту без використання миші. Сліпі користувачі взаємодіють із веб-сторінками за допомогою клавіатури і нічого іншого - вони не бачать вказівника миші, щоб зробити з нею щось корисне, тож це клавіатура чи нічого. Клавіша вкладки - це основний спосіб навігації по документу, а особливо форм. Перезапис поведінки за замовчуванням клавіші вкладки унеможливить незрячих користувачів переміщення фокусу на наступний елемент форми.

Отже, якщо ви пишете веб-сайт для широкої аудиторії, я б рекомендував не робити цього без вагомих причин і запропонувати якусь альтернативу для незрячих користувачів, які не вловлюють їх у текстовій області.

Про те, що варто, ось мій oneliner, про що ви всі говорили в цій темі:

<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>

Тестуйте в останніх виданнях Chrome, Firefox, Internet Explorer та Edge.

Ось моя версія цього, підтримує:

• вкладка + зсув
• підтримує скасування стека для простих вставок символів вкладки
• підтримує відступ / відступ блокової лінії, але відміняє стек
• належним чином вибирає цілі рядки, коли блокувати відступ / відміна
• підтримує автоматичний відступ при натисканні клавіші Enter (підтримує скасування стека)
• використовуйте підтримку скасування клавіш Escape на наступній вкладці / клавіші введення (щоб ви могли натиснути клавішу Escape, а потім вкладку)
• Працює в Chrome + Edge, неперевірені інші.

$(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>

Сучасний спосіб, коли обидва є прямолінійними і не втрачають здатності скасовувати (Ctrl + Z) останні зміни.

$('#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));
    }
});

Більше про execCommand:

• https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Редагувати:

Як зазначалося в коментарі (і хоча це колись було «сучасним» рішенням ), ця функція застаріла. Цитуючи документи:

Ця функція застаріла. Хоча він все ще може працювати в деяких браузерах, його використання не рекомендується використовувати, оскільки його можна буде видалити будь-коли. Намагайтеся уникати його використання.

Я нікуди швидко не намагався використати відповідь @ kasdega в середовищі AngularJS, ніщо, що я намагався, могло зробити Angular діяти на зміну. Тож у випадку, якщо це перешкоджає перехожим, ось перепис коду @ kasdega, стиль AngularJS, який працював для мене:

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');
            }
        });
    };
});

і:

<textarea ng-model="mytext" ng-allow-tab></textarea>

Вам потрібно написати JS-код, щоб увімкнути клавішу TAB і вставити купу пробілів. Щось схоже на те, що робить JSFiddle.

Перевірте скрипку jquery :

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');
  } 
});
​

Багаторядковий сценарій позначення на основі рішення @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;
    }
});

Це рішення дозволяє вкладати вкладки в цілому виді, як у вашому типовому редакторі коду, і знімати його з виділення. Однак я не придумав, як реалізувати вкладку shift, коли немає вибору.

$('#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>

Виходячи з усього, що люди мусили сказати тут на відповіді, це лише комбінація клавіш (не клавіатура) + prevenDefault () + вставити символ вкладки на каре. Щось на зразок:

var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
   e.preventDefault();
   insertAtCaret('txt', '\t')
}

Рання відповідь мала робочу jsfiddle, але вона використовувала сповіщення () при натисканні клавіш. Якщо ви видалите це сповіщення, воно не спрацювало. Я щойно додав функцію для вставки вкладки в поточну позицію курсору в текстовій області.

Тут працює jsfiddle для того ж: http://jsfiddle.net/nsHGZ/

Я бачу, що ця тема не вирішена. Я це зашифрував, і це працює дуже добре. У нього вставляється таблиця за індексом курсору. Без використання 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>

Утримуйте ALT і натисніть 0,9 з цифрової клавіатури. Він працює в google-chrome

Я зробив такий, до якого ви можете отримати доступ з будь-яким елементом textarea, який вам подобається:

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; 
    }
}

І елемент виглядав би так:

<textarea onkeydown="textControl(this,event)"></textarea>

Простий спосіб я знайшов , щоб зробити це в сучасних браузерах з ванільним JavaScript є:

  <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>

Зауважте, що я використовував багато функцій ES6 у цьому фрагменті заради простоти, ймовірно, ви захочете перекласти його (за допомогою Babel або TypeScript) перед його розгортанням.

Вищенаведені відповіді видаляють всю історію скасування. Для тих, хто шукає рішення, яке не робить цього, я витратив останню годину, кодуючи наступні для 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);
    });
};

Коротше кажучи, вкладки вставляються на початку вибраних рядків.

JSFiddle: http://jsfiddle.net/iausallc/5Lnabspr/11/

Суть: https://gist.github.com/iautomation/e53647be326cb7d7112d

Приклад використання: $('textarea').enableTabs('\t')

Мінуси: працює лише в Chrome, як є.

У Github є бібліотека для підтримки вкладок у ваших текстових областях від wjbryant: Перезакладка вкладок

Ось як це працює:

// get all the textarea elements on the page
var textareas = document.getElementsByTagName('textarea');

// enable Tab Override for all textareas
tabOverride.set(textareas);

Як варіант коду kasdega вище, замість того, щоб додавати вкладку до поточного значення, ви можете замість цього вставити символи в поточну точку курсору. Це має перевагу:

• дозволяє вставити 4 пробіли як альтернативу вкладці
• скасувати і повторити працюватиме із вставленими символами (це не буде з ОП)

тому замініть

    // set textarea value to: text before caret + tab + text after caret
    $(this).val($(this).val().substring(0, start)
                + "\t"
                + $(this).val().substring(end));

з

    // 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;
    }
}

Спробуйте цю просту функцію 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();

Я повинен був зробити функцію, щоб зробити те ж саме. Це просто, просто скопіюйте цей код у свій сценарій і використовуйте: enableTab( HTMLElement )HTMLelement є чимось на зразокdocument.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}}}

Кожен вхід елемент textarea має подію onkeydown. У обробці подій ви можете запобігти реакції за замовчуванням клавіші вкладки, використовуючи event.preventDefault (), коли event.keyCode дорівнює 9.

Потім поставте вкладку в потрібне положення:

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
    }
});

Простий окремий сценарій:

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;
        }
    }
}

Якщо вам справді потрібні вкладки, скопіюйте вкладку зі слова чи блокнота та вставте її в текстове поле, куди вам потрібно

1 2 3

12 22 33

На жаль, я думаю, що вони видаляють вкладки з цих коментарів :) Це відображатиметься як% 09 у вашому POST або GET