Metin alanına girintilemek için sekmeyi kullanma

Yanımda basit bir html textarea var. Şu anda içindeki sekmeyi tıklarsanız, bir sonraki alana gider. Sekme düğmesi yerine birkaç boşluk girintisini yapmak istiyorum. Bunu nasıl yapabilirim? Teşekkürler.

Benzer sorulara verilen diğer cevaplardan büyük ölçüde borçlanma (aşağıda yayınlanmıştır) ...

$(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: SEKME tuş basımı bir metin kutusu içinde nasıl yakalanır

<tab> textarea ile nasıl başa çıkılır?

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

Bu çözüm jQuery gerektirmez ve sayfadaki tüm metinlerde sekme işlevselliğini etkinleştirir.

Diğerlerinin yazdığı gibi, etkinliği yakalamak, varsayılan eylemi önlemek (imlecin odağı kaydırmaması için) ve bir sekme karakteri eklemek için JavaScript'i kullanabilirsiniz.

Ancak , varsayılan davranışın devre dışı bırakılması, odağı fare kullanmadan metin alanının dışına taşımayı imkansız hale getirir. Kör kullanıcılar klavyeyi kullanarak web sayfaları ile etkileşime girer ve başka hiçbir şey kullanmazlar - fare işaretçisini yararlı bir şey yapmak için göremezler, bu yüzden klavye veya hiçbir şey değildir. Sekme tuşu, belgede ve özellikle formlarda gezinmenin birincil yoludur. Sekme tuşunun varsayılan davranışını geçersiz kılmak, görme engelli kullanıcıların odağı bir sonraki form öğesine taşımasını imkansız hale getirir.

Bu nedenle, geniş bir kitle için bir web sitesi yazıyorsanız, bunu zorlayıcı bir neden olmadan yapmamanızı tavsiye ederim ve kör kullanıcılar için metin alanında tuzağa düşmeyen bir çeşit alternatif sunarım.

Değeri ne için, işte benim oneliner, hepiniz bu konuda konuştuklarınız için:

<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 ve Edge'in en son sürümlerinde test edin.

İşte bu benim sürümü destekler:

• sekme + kaydırma sekmesi
• Basit sekme karakteri eklemeleri için geri alma yığınını korur
• blok satırı girintisini / girintisini destekler ancak yığını geri alır
• satır girintisi / girintisiz olduğunda tüm satırları düzgün seçer
• enter tuşuna basıldığında otomatik girintiyi destekler (yığını geri alır)
• bir sonraki sekmede / enter tuşunda Escape tuşunu iptal etme desteğini kullan (böylece Escape tuşuna basıp sekme çıkışı yapabilirsiniz
• Chrome + Edge'de çalışır, diğerleri test edilmez.

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

Her ikisinin de basit olduğu ve son değişiklikleri geri alma (Ctrl + Z) yeteneğini kaybetmediği modern yol .

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

Hakkında daha fazla bilgi execCommand:

• https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Düzenle:

Yorumda belirtildiği gibi (ve bu bir zamanlar "modern" bir çözüm olsa da ) özellik modası geçmiş. Dokümanlardan alıntı:

Bu özellik kullanılmıyor. Bazı tarayıcılarda hala çalışabilse de, kullanımı her zaman kaldırılabileceğinden önerilmez. Kullanmamaya çalışın.

AngularJS ortamında @ kasdega'nın cevabını kullanmaya çalışırken hiçbir yere hızlı gitmiyordum, denediğim hiçbir şey değişime Angular hareket edebiliyordu. Bu yüzden yoldan geçenlerin herhangi bir şekilde kullanılması durumunda, benim için çalışan @ kasdega'nın kodu olan AngularJS stilinin yeniden yazılması:

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');
            }
        });
    };
});

ve:

<textarea ng-model="mytext" ng-allow-tab></textarea>

SEKME tuşunu basılı tutmak ve bir grup boşluk eklemek için JS kodu yazmanız gerekir. JSFiddle'ın yaptıklarına benzer bir şey.

Jquery kemanını kontrol edin :

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 çözümüne dayanan çok satırlı komut dosyası.

$('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;
    }
});

Bu çözüm, tipik kod düzenleyiciniz gibi tüm bir seçimde sekmeye ve bu seçimin sekmesini de kaldırmanıza olanak tanır. Ancak, seçim olmadığında shift-tabın nasıl uygulanacağını bulamadım.

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

İnsanlar burada cevaplar üzerinde söylemek zorunda oldukları tüm dayanarak, bu sadece bir tuş takımı (keyup değil) + preventDefault () + caret bir sekme karakteri ekleyin. Gibi bir şey:

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

Önceki cevap çalışan bir jsfiddle vardı ama tuş kilidi üzerinde bir uyarı () kullandı. Bu uyarıyı kaldırırsanız çalışmadı. Metin alanındaki geçerli imleç konumuna bir sekme eklemek için bir işlev ekledim.

İşte aynı için çalışan bir jsfiddle: http://jsfiddle.net/nsHGZ/

Bu konunun çözülmediğini görüyorum. Bunu kodladım ve çok iyi çalışıyor. İmleç dizinine bir tablo ekler. Jquery kullanmadan

<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 tuşunu basılı tutun ve sayısal tuş takımından 0,9 tuşuna basın. Google-Chrome'da çalışır

Beğendiğiniz herhangi bir textarea öğesi ile erişebileceğiniz bir tane yaptım:

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

Ve eleman şöyle görünecektir:

<textarea onkeydown="textControl(this,event)"></textarea>

Basit yolu Bunu yapmak bulundu modern tarayıcılarda ile vanilya JavaScript geçerli:

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

Basitlik amacıyla bu snippet'te birçok ES6 özelliği kullandığımı, dağıtmadan önce muhtemelen (Babel veya TypeScript ile) aktarmak isteyeceksiniz.

Yukarıdaki tüm silme geri alma geçmişini cevaplar. Bunu yapmayan bir çözüm arayan herkes için, son saati Chrome için aşağıdakileri kodlayarak geçirdim:

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);
    });
};

Kısacası, sekmeler seçilen satırların başına eklenir.

JSFiddle: http://jsfiddle.net/iausallc/5Lnabspr/11/

Gist: https://gist.github.com/iautomation/e53647be326cb7d7112d

Örnek kullanım: $('textarea').enableTabs('\t')

Eksileri: Yalnızca Chrome'da olduğu gibi çalışır.

Withbryant tarafından textareas'ta sekme desteği için Github'da bir kütüphane var: Tab Override

Bu nasıl çalışır:

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

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

Yukarıdaki kasdega koduna bir seçenek olarak, sekmeyi geçerli değere eklemek yerine, geçerli imleç noktasına karakterler ekleyebilirsiniz. Bunun faydası:

• sekmeye alternatif olarak 4 boşluk eklemenizi sağlar
• geri al ve yinele eklenen karakterlerle çalışır (OP ile çalışmaz)

öyleyse değiştir

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

ile

    // 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;
    }
}

Bu basit jQuery işlevini deneyin:

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

Aynı şeyi yapmak için bir işlev yapmak zorunda kaldım, kullanımı basit, sadece bu kodu betiğinize kopyalayın ve kullanın: enableTab( HTMLElement )HTMLelement gibi bir şey olmakdocument.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}}}

Bir textarea öğesinin her girdisinde bir onkeydown olayı bulunur. Olay işleyicisinde, event.keyCode 9 olduğunda event.preventDefault () öğesini kullanarak tab anahtarının varsayılan reaksiyonunu önleyebilirsiniz .

Ardından doğru konuma bir sekme işareti koyun:

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
    }
});

Basit bağımsız komut dosyası:

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

Gerçekten sekmelere ihtiyacınız varsa, sekmeyi sözcük veya not defterinden kopyalayın ve istediğiniz metin kutusuna yapıştırın

1 2 3

12 22 33

Maalesef bu yorumlardan sekmeleri kaldırdıklarını düşünüyorum :) POST veya GET'inizde% 09 olarak gösterilecek