使用制表符在文本区缩进

document.getElementById('textbox').addEventListener('keydown', function(e) {
if (e.key == 'Tab') {
e.preventDefault();
var start = this.selectionStart;
var end = this.selectionEnd;


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


// put caret at right position again
this.selectionStart =
this.selectionEnd = start + 1;
}
});

<input type="text" name="test1" />
<textarea id="textbox" name="test2"></textarea>
<input type="text" name="test3" />

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

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

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

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

// Found this:
//    https://stackoverflow.com/questions/6637341/use-tab-to-indent-in-textarea
//  ... then this:
//    https://jsfiddle.net/2wkrhxLt/8/
//  ... then this:
//    https://extendsclass.com/typescript-to-javascript.html
//  Now works with more than one textarea, and fully preserves the undo
//  stack.  Behaviour closely matches common text editors like Pluma:
//    - obeys computed tab-size style attribute
//    - inserts when Tab key used without selection
//    - can be configured to insert spaces instead of tabs
//      - obeys tab positions i.e. modulo tab-size
//    - block indenting
//    - outdents with SHIFT-Tab key (with or without selection)
//    - auto-indents
//    - Home/End bouncing
//    - preserves selection/cursor
//    - scrolls to cursor or selection start


// Begin enabled.
var tab_editor_enabled = true;


function tab_editor(target, use_spaces)
{
// Abort if other modifier keys are pressed.
if (event.ctrlKey || event.altKey)
{ return; }


// Preserve original selection points.
original_start = target.selectionStart;
original_end   = target.selectionEnd;


// Prepare.
selection_start = original_start;
selection_end   = original_end;
selection = (selection_start != selection_end);
text = target.value;
tab_sz = window.getComputedStyle(target).tabSize;
next_enabled_state = true;


// Key handler.
switch (event.key)
{
// Esc restores default Tab functionality i.e. move to next field.
// Acts as a toggle so an even-number of ESC recaptures the Tab key.
case 'Escape':
event.preventDefault();
tab_editor_enabled = !tab_editor_enabled;
next_enabled_state = false;
break;


// Shift by itself preserves enabled state so that a prior Esc also
// restores default SHIFT-Tab functionality i.e. move to previous field.
case 'Shift':
next_enabled_state = tab_editor_enabled;
break;


// Auto-indent.
case 'Enter':
// Only without selection.
if (!selection)
{
// Find start of the current line.
while ((selection_start > 0) && (text[selection_start-1] != '\n'))
{ selection_start--; }
line_start = selection_start;
// Find first non-whitespace character.
while ((text[selection_start] == ' ') || (text[selection_start] == '\t'))
{ selection_start++; }
// If those two aren't the same, insert whitespace to auto-indent.
if (selection_start != line_start)
{
event.preventDefault();
// Insert newline and indented text.
insert = '\n' + text.substr(line_start, Math.min(original_start, selection_start) - line_start);
document.execCommand('insertText', false, insert);
}
}
// Scroll to make caret visible
target.blur();
target.focus();
break;


// Bounce home.
case 'Home':
// Find start of the current line.
while ((selection_start > 0) && (text[selection_start-1] != '\n'))
{ selection_start--; }


// If cursor was already there, bounce to indent.
if (selection_start == original_start)
{
event.preventDefault();
// Find first non-whitespace character.
while ((text[selection_start] == ' ') || (text[selection_start] == '\t'))
{ selection_start++; }
if (event.shiftKey)
{
target.selectionStart = selection_start <= selection_end
? selection_start
: selection_end;
target.selectionEnd   = selection_start <= selection_end
? selection_end
: selection_start;
}
else
{
target.selectionStart = selection_start;
target.selectionEnd   = selection_start;
}
}
// Scroll to make caret visible
target.blur();
target.focus();
break;


// Bounce end.
case 'End':
// Find end of the current line.
while ((text[selection_end] != '\n') && (selection_end < text.length))
{ selection_end++; }
//selection_end--;


// If cursor was already there, bounce to last non-whitespace character.
if (selection_end == original_end)
{
event.preventDefault();
// Find last non-whitespace character.
while ((text[selection_end-1] == ' ') || (text[selection_end-1] == '\t'))
{ selection_end--; }
if (event.shiftKey)
{
target.selectionStart = selection_start <= selection_end
? selection_start
: selection_end;
target.selectionEnd   = selection_start <= selection_end
? selection_end
: selection_start;
}
else
{
target.selectionStart = selection_end;
target.selectionEnd   = selection_end;
}
}
// Scroll to make caret visible
target.blur();
target.focus();
break;


// Tab with or without SHIFT modifier key.
case 'Tab':


// Previously disabled by Esc, so break without capturing key.
if (!tab_editor_enabled)
{ break; }


// Capture Tab key.
event.preventDefault();


// Insert or remove (indent or outdent).
remove = event.shiftKey;


// No selection, inserting.
if (!selection && !remove)
{
// If using spaces, compute how many we need to add based on caret
// relative to beginning of line, and any tab characters which may
// already be there.
if (use_spaces)
{
while ((selection_start > 0) && (text[selection_start-1] != '\n'))
{ selection_start--; }
pos = 0;
while (selection_start < original_start)
{
pos += text[selection_start] == '\t'
? tab_sz - (pos % tab_sz)
: 1;
selection_start++;
}
insert = ' '.repeat(tab_sz - (pos % tab_sz));
}
else
{
insert = '\t';
}
// Insert and move cursor.
document.execCommand('insertText', false, insert);
original_start += insert.length;
original_end   += insert.length;
}


// With selection, or no selection but outdenting.
else
{
// Moves backwards from start of selection, and stops when:
//    - reach start of textarea
//    - reached beginning of line
while ((selection_start > 0) && (text[selection_start-1] != '\n'))
{ selection_start--; }


// Start of first line.  Used to anchor the cursor when outdenting
// without a selection.
first_line_start = selection_start;


// Moves forwards from end of selection, and stops when:
//    - reach end of textarea
//    - reached the beginning of the next line.
selection_end = Math.max(selection_end, selection_start + 1);
selection_end = Math.min(selection_end, text.length - 1);
while ((text[selection_end-1] != '\n') && (selection_end < text.length))
{ selection_end++; }


// We now have an array of full lines without trailing newlines.
lines = text.substr(selection_start, (selection_end - selection_start)).split('\n');


// Insert/remove tabs/spaces on each line.
for (n=0; n<lines.length; n++)
{
// Don't indent last line if cursor at start of line.
if ((n == (lines.length - 1)) && (lines[n].length == 0))
{ continue; }


// Tab prepends.
if (!remove)
{
prepend = use_spaces ? ' '.repeat(tab_sz) : '\t';
lines[n] = prepend + lines[n];
original_start += ((n == 0) ? prepend.length : 0);
original_end   +=             prepend.length;
}
// SHIFT-Tab removes from start of line.
else
{
// Single tabs.
if (lines[n].startsWith('\t'))
{
lines[n] = lines[n].substr(1);
anchor  = selection
? selection_start
: Math.max(selection_start, first_line_start);
original_start = Math.max((original_start - ((n == 0) ? 1 : 0)), anchor);
original_end   = selection
? original_end - 1
: original_start;
}
// Also removes run of spaces up to text-area's tab_sz, with or
// without use_spaces.
else
{
spcs = tab_sz;
while (spcs > 0)
{
if (lines[n].startsWith(' '.repeat(spcs)))
{
lines[n] = lines[n].substr(spcs);
anchor  = selection
? selection_start
: Math.max(selection_start, first_line_start);
original_start = Math.max((original_start - ((n == 0) ? spcs : 0)), anchor);
original_end   = selection
? original_end - spcs
: original_start;
break;
}
spcs--;
}
}
}
}
// Apply expanded whole-line selection points to textarea.
target.selectionStart = selection_start;
target.selectionEnd   = selection_end;
// Insert replacement text.
document.execCommand('insertText', false, lines.join('\n'));
}
// Scroll to make caret visible, and then restore original selection,
// adjusted based on how many characters were inserted or removed.
target.selectionStart = original_start;
target.selectionEnd   = original_start;
target.blur();
target.focus();
target.selectionEnd   = original_end;
break;
// Unhandled keys.
default:
break;
}


// Manages breaking away from Tab key capture using Esc.
tab_editor_enabled = next_enabled_state;


}

textarea {
tab-size: 4;
}

<textarea
rows="16"
cols="132"
spellcheck="false"
tabindex="1">This is a normal textarea input where tab is not handled.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.  Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</textarea>


<br>
<br>


<textarea
rows="16"
cols="132"
tabindex="2"
spellcheck="false"
onkeydown="tab_editor(this);">This is a textarea input using tab_editor.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.  Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</textarea>


<br>
<br>


<textarea
rows="16"
cols="132"
tabindex="3"
spellcheck="false"
style="tab-size: 8;"
onkeydown="tab_editor(this, true);">This is a textarea input using tab_editor using spaces instead of tabs.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.  Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.  Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</textarea>