탭을 사용하여 텍스트 영역 들여쓰기
제 사이트에 간단한 HTML 텍스트 영역이 있습니다.
지금은 클릭하면 다음 필드로 이동합니다.대신 탭 버튼을 몇 칸 들여쓰기로 하고 싶습니다.
어떻게 해야 하나요?
유사한 질문(아래 게시됨)에 대해 다른 답변에서 많이 차용함...
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" />jQuery: 텍스트 상자에서 TAB 키 누름을 캡처하는 방법
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를 사용하여 이벤트를 캡처하고 기본 작업(커서 포커스가 이동하지 않도록)을 방지하고 탭 문자를 삽입할 수 있습니다.
그러나 기본 동작을 비활성화하면 마우스를 사용하지 않고는 텍스트 영역 밖으로 포커스를 이동할 수 없습니다.시각장애인 사용자는 키보드를 사용하여 웹 페이지와 상호 작용합니다. 마우스 포인터를 볼 수 없으므로 키보드인지 아닌지를 확인할 수 없습니다.탭 키는 문서, 특히 양식을 탐색하는 기본 방법입니다.탭 키의 기본 동작을 재정의하면 시각 장애인 사용자가 포커스를 다음 양식 요소로 이동할 수 없습니다.
그래서, 만약 당신이 많은 사람들을 위해 웹사이트를 쓴다면, 저는 이것을 강제적인 이유 없이 하는 것에 반대하고, 시각장애인 사용자들을 위해 텍스트 영역에 그들을 가두지 않는 어떤 종류의 대안을 제공하는 것을 추천합니다.
여러분 모두가 이 스레드에서 이야기한 것에 대해 제가 쓴 하나의 라이너입니다.
<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 키를 누를 때 자동 들여쓰기 지원(실행 취소 스택 사용)
- 다음 탭에서 이스케이프 키 취소 지원 사용/키 입력(이 경우 이스케이프를 누른 후 탭을 뺄 수 있음)
- 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:
편집:
코멘트에서 지적한 바와 같이(그리고 이것은 한때 "현대적인" 솔루션이었지만) 기능은 더 이상 쓸모가 없습니다.문서 견적:
이 기능은 더 이상 사용되지 않습니다.일부 브라우저에서는 여전히 작동할 수 있지만 언제든지 제거될 수 있기 때문에 사용이 권장되지 않습니다.그것을 사용하지 않도록 하세요.
저는 앵귤러로 @kasdega의 대답을 사용하려고 노력하는 데 빠르게 진전되지 않았습니다.JS 환경, 제가 노력한 그 어떤 것도 Angular가 변화에 따라 행동하게 할 수 없을 것 같았습니다.그래서 지나가는 사람들에게 도움이 될 경우를 대비해서, 여기 @kasdega의 코드, Angular.JS 스타일은 저에게 효과가 있었습니다.
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>
이 솔루션을 사용하면 일반적인 코드 편집기처럼 전체 선택 영역에서 탭을 사용하고 해당 선택 영역의 탭을 해제할 수 있습니다.하지만 선택사항이 없을 때 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>JS코드를 작성해야 Tab키를 누르고 공백을 많이 삽입할 수 있습니다.JSFiddle이 하는 것과 비슷한 것.
jquery fidle 확인:
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;
}
});
Alt를 누른 상태에서 숫자 키패드에서 0.9를 누릅니다.구글 크롬에서 작동합니다.
바닐라 자바스크립트로 최신 브라우저에서 이를 수행하는 가장 간단한 방법은 다음과 같습니다.
<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를 사용하여 파일을 변환하는 것이 좋습니다.
사람들이 여기서 답변에 대해 언급한 모든 내용을 바탕으로 키다운(키업 아님) + 기본값 방지() + 캐럿에 탭 문자 삽입의 조합일 뿐입니다.다음과 같은 것:
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
insertAtCaret('txt', '\t')
}
이전 답변에는 작동 중인 jsfidle이 있었지만 키다운 시 경고()를 사용했습니다.이 경고를 제거하면 작동하지 않습니다.텍스트 영역의 현재 커서 위치에 탭을 삽입하는 기능을 방금 추가했습니다.
다음은 동일한 작업을 위한 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>
위의 답변은 모두 삭제 실행 취소 내역입니다.그렇게 하지 않는 솔루션을 찾는 사람들을 위해, 저는 지난 한 시간 동안 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);
});
};
즉, 탭은 선택한 줄의 시작 부분에 삽입됩니다.
JSFidle: http://jsfiddle.net/iausallc/5Lnabspr/11/
요지: https://gist.github.com/iautomation/e53647be326cb7d7112d
예: 사용 예:$('textarea').enableTabs('\t')
단점: 크롬에서만 그대로 작동합니다.
원하는 텍스트 영역 요소로 액세스할 수 있는 것을 만들었습니다.
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>
당신은 할 수 .setRangeText()는 서사용방법에서 할 수 .textarea기본적으로 이 작업을 수행할 요소입니다.
HTML
<textarea id='my-textarea' onkeydown="handleKeyDown(event)"></textarea>
제이에스
const handleKeyDown = e => {
if (e.key === 'Tab') {
e.preventDefault();
const textArea = e.currentTarget; // or use document.querySelector('#my-textarea');
textArea.setRangeText(
'\t',
textArea.selectionStart,
textArea.selectionEnd,
'end'
);
}
};
setRangeText텍스트를 대체하는 데 사용되지만, 우리는 단지 삽입하기를 원하기 때문입니다.\t우리는 단순히 선택을 현재 선택의 시작과 끝으로 설정합니다.'end'text.value의 .
보너스 CSS
크기를 을 하면 됩니다.tab-size블록 요소의 속성입니다.대부분의 브라우저의 기본값은 다음과 같습니다.8.
textarea {
tab-size: 4;
}
Mozilla: HTMLInputElement.setRangeText()
다음은 기본 들여쓰기 및 디텐트를 지원하는 간단한 순수 JS 접근 방식입니다.
안타깝게도 실행 취소 기록을 보존하거나 블록 수준 탭핑을 지원하지 않습니다.
document.querySelectorAll('textarea').forEach(function(textarea)
{
textarea.onkeydown = function(e)
{
if (e.keyCode === 9 || e.which === 9)
{
e.preventDefault();
if (e.shiftKey && this.selectionStart)
{
if (this.value[this.selectionStart -1] === "\t")
{
var s = this.selectionStart;
this.value = this.value.substring(0,this.selectionStart - 1) + this.value.substring(this.selectionEnd);
this.selectionEnd = s-1;
}
}
if (!e.shiftKey)
{
var s = this.selectionStart;
this.value = this.value.substring(0,this.selectionStart) + "\t" + this.value.substring(this.selectionEnd);
this.selectionEnd = s+1;
}
}
}
});
document.querySelector('textarea').addEventListener("keydown", function (e) {
if (e.key == "Tab") {
e.preventDefault();
let start = this.selectionStart;
let 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;
}
});
Github에는 wjbryant의 텍스트 영역에서 탭을 지원하는 라이브러리가 있습니다.탭 재정의
작동 방식은 다음과 같습니다.
// get all the textarea elements on the page
var textareas = document.getElementsByTagName('textarea');
// enable Tab Override for all textareas
tabOverride.set(textareas);
텍스트 영역 요소의 모든 입력에는 전원 끄기 이벤트가 있습니다.이벤트 핸들러에서는 이벤트가 발생할 때마다 event.preventDefault()를 사용하여 탭 키의 기본 반응을 방지할 수 있습니다.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_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;
}
}
}
위의 kasdega 코드에 대한 옵션으로 탭을 현재 값에 추가하는 대신 현재 커서 지점에 문자를 삽입할 수 있습니다.이는 다음과 같은 이점이 있습니다.
- 탭 대신 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, ' ');
몇 가지 해결책을 시도해 보았지만 아무 것도 효과가 없었기 때문에 다음과 같은 방법을 생각해 냈습니다.
document.addEventListener('keydown', (e) => {
if (e.code === 'Tab') {
e.preventDefault();
const TAB_WIDTH = 4;
//* Apply 1 space for every tab width
document.execCommand('insertText', false, ' '.repeat(TAB_WIDTH));
}
});
저는 댓글을 달 정도로 평판이 좋지 않습니다. 아니면 브래드 로빈슨의 답변에 댓글로 추가했을 것입니다. 콜비의 댓글에 후속으로 말이죠.
저는 두 가지 모두에서 영감을 받았습니다.결과는 다음과 같습니다. https://jsfiddle.net/qmyh76tu/1/
코드를 게시하지 않고는 바이올린을 게시할 수 없기 때문에 이 답변의 스니펫으로도 사용할 수 있습니다.
이 버전은 다음과 같은 몇 가지 추가 기능을 수행합니다.
- 실행 취소 스택을 완전히 보존합니다.
- 순수 JS로 구현됨
EDIT 2022-10-29: 줄의 시작 부분에 커서를 두고 돌출을 시도할 때 발견한 문제를 수정하기 위해 스니펫과 피들에 작은 변화가 있었습니다.또한 tab_editor()를 사용하지 않고 비교할 수 있는 텍스트 영역을 추가했습니다.
EDIT 2022-10-30: 자동 들여쓰기 문제를 해결하고 홈/엔드 바운스를 추가하기 위한 또 다른 작은 변화.
// 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>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 )HTML 요소는 다음과 같습니다.document.getElementById( id )
The code is:
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").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
}
});
탭이 정말로 필요한 경우 단어 또는 메모장에서 탭을 복사하여 원하는 텍스트 상자에 붙여넣습니다.
1 2 3
12 22 33
유감스럽게도 저는 그들이 이러한 댓글에서 탭을 제거한다고 생각합니다 :) 그것은 당신의 POST 또는 GET에 %09로 표시될 것입니다.
언급URL : https://stackoverflow.com/questions/6637341/use-tab-to-indent-in-textarea
'programing' 카테고리의 다른 글
| PowerShell 경로에서 달러 기호 이스케이프가 작동하지 않음 (0) | 2023.08.18 |
|---|---|
| PIL 이미지를 바이트 배열로 변환하시겠습니까? (0) | 2023.08.18 |
| $.ajax - dataType (0) | 2023.08.18 |
| Ajax 호출 채우기 Typeahead 부트스트랩 (0) | 2023.08.18 |
| 지정된 UIColor에 대해 더 밝고 어두운 색상 변화를 표시합니다. (0) | 2023.08.18 |