반응형
탭을 사용하여 텍스트 영역에 들여 쓰기
내 편에는 간단한 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>을 처리하는 방법은 무엇입니까?
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에서 테스트되었습니다.
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>
둘 다 간단 하고 마지막 변경 사항 을 취소 (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:
Tab 키를 누르고 공백을 삽입하려면 JS 코드를 작성해야합니다. JSFiddle과 비슷한 기능.
jquery 바이올린을 확인하십시오 .
HTML :
<textarea id="mybox">this is a test</textarea>
자바 스크립트 :
$('#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>여기 내 버전이 있습니다.
- 탭 + 시프트 탭
- 간단한 탭 문자 삽입을 위해 실행 취소 스택 유지
- 블록 라인 들여 쓰기 / 들여 쓰기를 지원하지만 휴지통은 스택을 취소합니다.
- 들여 쓰기 / 들여 쓰기 차단시 전체 줄을 올바르게 선택
- 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>사람들이 대답에 대해 여기에서 말해야했던 모든 것을 기반으로, 키 다운 (키 업이 아님) + preventDefault () + 캐럿에 탭 문자를 삽입하십시오. 다음과 같은 것 :
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
insertAtCaret('txt', '\t')
}
이전 답변에는 작동하는 jsfiddle이 있었지만 keydown에 alert ()을 사용했습니다. 이 경고를 제거하면 작동하지 않습니다. 텍스트 영역의 현재 커서 위치에 탭을 삽입하는 기능을 추가했습니다.
여기에 동일한 작업을 위해 jsfiddle이 작동합니다 : http://jsfiddle.net/nsHGZ/
ALT를 누른 상태에서 숫자 키패드에서 0.9를 누릅니다. 구글 크롬에서 작동
나는이 주제가 해결되지 않은 것을 본다. 나는 이것을 코딩했고 잘 작동하고있다. 커서 색인에 테이블을 삽입합니다. 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);
});
};
요컨대 선택한 선의 시작 부분에 탭이 삽입됩니다.
JSFiddle : http://jsfiddle.net/iausallc/5Lnabspr/11/
요점 : https://gist.github.com/iautomation/e53647be326cb7d7112d
사용법 예 : $('textarea').enableTabs('\t')
단점 : Chrome에서만 작동합니다.
원하는 텍스트 영역 요소로 액세스 할 수있는 것을 만들었습니다.
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>
간단한 방법은 내가 그렇게 발견 현대적인 브라우저에서 와 바닐라 자바 스크립트 입니다 :
<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) + " " + value.slice(selectionEnd);
codebox.setSelectionRange(selectionStart+2, selectionStart+2)
}
});
</script>단순화를 위해이 스 니펫에서 많은 ES6 기능을 사용 했으므로 배포하기 전에 (Babel 또는 TypeScript로) 변환하고 싶을 것입니다.
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}}}
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);
textarea 요소의 모든 입력에는 onkeydown 이벤트가 있습니다. 이벤트 핸들러에서 event.keyCode가 9 일 때마다 event.preventDefault () 를 사용하여 탭 키의 기본 반응을 막을 수 있습니다 .
그런 다음 올바른 위치에 탭 표시를 넣으십시오.
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
불행히도 나는이 주석에서 탭을 제거한다고 생각합니다. :) POST 또는 GET에서 % 09로 표시됩니다
참고 URL : https://stackoverflow.com/questions/6637341/use-tab-to-indent-in-textarea
반응형
'development' 카테고리의 다른 글
| mysqldump에서 레코드 수를 제한하고 있습니까? (0) | 2020.06.29 |
|---|---|
| SQL Server : 두 테이블에 동시에 삽입 할 수 있습니까? (0) | 2020.06.29 |
| \ w와 \ b 정규 표현식 메타 문자의 차이점 (0) | 2020.06.29 |
| 자식 체크 아웃 태그, 분기에서 자식 풀 실패 (0) | 2020.06.29 |
| RESTful 방식으로 자원에 대한 서버 측 메소드 호출 (0) | 2020.06.29 |