[html] 탭을 사용하여 텍스트 영역에 들여 쓰기

내 편에는 간단한 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>을 처리하는 방법은 무엇입니까?

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 키를 누를 때 자동 들여 쓰기 지원 (실행 취소 스택 유지)
  • 다음 탭 / 엔터 키에서 Esc 키 취소 지원 사용 (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:


편집하다:

의견에서 지적했듯이 (이것은 한때 “현대적인”솔루션 이었음 ) 기능은 더 이상 사용되지 않습니다. 문서 인용하기 :

이 기능은 더 이상 사용되지 않습니다. 일부 브라우저에서는 여전히 작동하지만 언제든지 제거 할 수 있으므로 사용하지 않는 것이 좋습니다. 사용을 피하십시오.


답변

AngularJS 환경에서 @kasdega의 답변을 빨리 사용하려고 시도하지 못했습니다. 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>