Используйте вкладку для отступа в textarea

У меня есть простая текстовая область HTML на моей стороне. Прямо сейчас, если вы нажмете вкладку в нем, он перейдет к следующему полю. Я хотел бы сделать отступ для кнопки табуляции на несколько пробелов вместо этого. Как я могу это сделать? Спасибо.

Заимствование из других ответов на аналогичные вопросы (опубликовано ниже) ...

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

Вот моя версия этого, поддерживает:

• Tab + Shift Tab
• поддерживает стек отмены для простых вставок символов табуляции
• поддерживает отступ / отступ строки строки, но уничтожает стек отмены
• правильно выбирает целые строки, когда блок отступ / не отступ
• поддерживает автоматический отступ при нажатии 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-Tab, когда нет выбора.

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

Исходя из всего, что люди должны были здесь сказать об ответах, это просто комбинация клавиш (не keyup) + protectDefault () + вставка символа табуляции в каретке. Что-то вроде:

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

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

Вот для чего работает 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 на цифровой клавиатуре. Работает в гугл-хром

Я сделал один, к которому вы можете получить доступ с любым элементом 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: Tab Override

Вот как это работает:

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

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

В качестве опции к коду Касдеги выше, вместо добавления вкладки к текущему значению, вы можете вместо этого вставлять символы в текущей точке курсора. Это имеет преимущество:

• позволяет вставить 4 пробела в качестве альтернативы табуляции
• отмены и повтор будет работать с вставленными символами (это не будет с OP)

так замени

    // 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. В обработчике событий вы можете предотвратить реакцию клавиши Tab по умолчанию, используя 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