टेक्स्टारिया में इंडेंट करने के लिए टैब का उपयोग करें

Question

मैं अपनी तरफ एक सरल HTML textarea है। अभी अगर आप इसमें टैब पर क्लिक करते हैं, तो यह अगले फ़ील्ड पर जाता है। मैं इसके बजाय टैब बटन इंडेंट को कुछ रिक्त स्थान बनाना चाहता हूं। मैं यह कैसे कर सकता हूँ? धन्यवाद।

Comments

यह जावास्क्रिप्ट के साथ सक्षम है, और एक जेएस लाइब्रेरी का उपयोग करके लगभग आसान है। क्या आप उन विकल्पों में से किसी का उपयोग करने में सक्षम हैं?

— डेविड कहते हैं कि

आपका पर्यावरण क्या है? जावास्क्रिप्ट, Jquery, कुछ और?

— कासदेगा

@ डेविड मैं उन में से किसी का भी उपयोग कर सकता हूँ

— user780483

मैं .focus () और .keydown () के संयोजन के साथ jquery का उपयोग करूंगा

— kasdega

कैसे textarea में <टैब> को संभालने के लिए

— कैस्पर क्लीजने

Answer 1

इसी तरह के सवालों (नीचे पोस्ट) के लिए अन्य उत्तरों से भारी उधार ...

$(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 कुंजी को कैसे कैप्चर करें

टेक्स्टारिया में <टैब> कैसे हैंडल करें?

http://jsfiddle.net/jz6J5/

Comments

"$ (this) .Get (0) .selectionStart"। सिर्फ "this.selectionStart" का उपयोग करें

— बोहदन योवोव

क्या आप इसे \ t के बजाय 4 रिक्त स्थान के साथ काम कर सकते हैं? यदि आप \ t "" को प्रतिस्थापित करते हैं तो यह रिक्त स्थान सम्मिलित करेगा लेकिन कैरेट को पीछे छोड़ देगा।

— सिनास्टेटिक

@Sinaesthetic - देर से उत्तर, लेकिन कैरेट को स्थानांतरित करने के लिए, अंतिम पंक्ति को 'स्टार्ट + 1' के बजाय 'स्टार्ट + 4' होने के लिए समायोजित करें

— nevada_scout

मैं आमतौर पर Stackoverflow से सीधे कोड को कॉपी नहीं करता और इसे अपने प्रोजेक्ट में पेस्ट करता हूं और यह काम करता है, लेकिन जब मैं करता हूं, तो यह कोड था। इसके लिए धन्यवाद।

— फ्लैट कैट

यह ब्राउज़र की पूर्ववत सुविधा (Ctrl + z) को तोड़ता है।

— 01AutoMonkey

Answer 2

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 की आवश्यकता नहीं है और यह एक पृष्ठ पर सभी टेक्स्टारैस पर टैब कार्यक्षमता को सक्षम करेगा।

Comments

क्या आप इसे \ t के बजाय 4 रिक्त स्थान के साथ काम कर सकते हैं? यदि आप \ t "" को प्रतिस्थापित करते हैं तो यह रिक्त स्थान सम्मिलित करेगा लेकिन कैरेट को पीछे छोड़ देगा।

— सिनास्टेटिक

@ सीनैस्टिक: हाँ, आप टैब को रिक्त स्थान में बदल सकते हैं, लेकिन आपको कोड को थोड़ा अनुकूलित करना होगा (एक के बजाय 3-4 नए अक्षर हैं)। अन्य विकल्प CSS टैब-आकार है।

— एड्रियन मैयर

@ सिनास्टैटिक हाँ, बस अंतिम पंक्ति this.selectionEnd = s+1;को बदलें this.selectionEnd = s + "\t".length;। यह एक चर या फ़ंक्शन पैरामीटर का उपयोग करने और इंडेंटेशन चार (ओं) को संग्रहीत करने के लिए क्लीनर होगा। लेकिन आप जानते हैं कि अब क्या बदलना है: यह +1परिभाषित करता है कि कैरेट को कितना आकर्षण है।

— स्टेनी

KeyboardEvent.keyCodeऔर KeyboardEvent.whichपदावनत गुण हैं। KeyboardEvent.keyइसके बजाय उपयोग करें ।

— Константин Ван

Answer 3

जैसा कि अन्य ने लिखा है, आप ईवेंट को कैप्चर करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं, डिफ़ॉल्ट कार्रवाई को रोक सकते हैं (ताकि कर्सर फोकस को शिफ्ट न करे) और एक टैब कैरेक्टर डालें।

परंतु , डिफ़ॉल्ट व्यवहार को अक्षम करने से माउस का उपयोग किए बिना फ़ोकस को पाठ क्षेत्र से बाहर ले जाना असंभव हो जाता है। ब्लाइंड उपयोगकर्ता कीबोर्ड का उपयोग करके वेब पेजों के साथ बातचीत करते हैं और कुछ नहीं - वे माउस पॉइंटर को इसके साथ उपयोगी कुछ भी करने के लिए नहीं देख सकते हैं, इसलिए यह कीबोर्ड है या कुछ भी नहीं है। टैब कुंजी दस्तावेज़ को नेविगेट करने का प्राथमिक तरीका है, और विशेष रूप से रूपों। टैब कुंजी के डिफ़ॉल्ट व्यवहार को ओवरराइड करने से नेत्रहीन उपयोगकर्ताओं के लिए फ़ोकस को अगले प्रपत्र तत्व पर ले जाना असंभव हो जाएगा।

इसलिए, यदि आप एक व्यापक दर्शकों के लिए एक वेब साइट लिख रहे हैं, तो मैं इसे एक सम्मोहक कारण के बिना करने की सलाह दूंगा, और नेत्रहीन उपयोगकर्ताओं के लिए कुछ प्रकार के विकल्प प्रदान करता हूं जो उन्हें textarea में नहीं फँसाता है।

Comments

धन्यवाद। मुझे अशिष्टता का कोई मतलब नहीं है, लेकिन मुझे पता नहीं है कि अंधे लोग कंप्यूटर का इस्तेमाल करते हैं। मैं इसे ध्यान में

— रखूंगा

यह ठीक है, बहुत से लोग नहीं जानते; यह उनके अनुभव के बाहर है। यहाँ एक परिचय दिया गया है: webaim.org/intro

— मार्टिन

अगर यह सामान्य दर्शकों के लिए एक वेबसाइट है तो हाँ वास्तव में बुरा विचार है। स्क्रीन रीडर उपयोगकर्ताओं के अलावा, कई अन्य उपयोगकर्ता हैं जो विभिन्न कारणों से या तो कीबोर्ड के साथ नेविगेट करना या चुना जाना चाहिए। टैब कुंजी फँसाने से इन उपयोगकर्ताओं के लिए प्रपत्र कम से कम कष्टप्रद और संभवत: अनुपयोगी हो जाएगा।

— स्टीविया

शायद नियंत्रण + टैब का उपयोग करें। यह अन्य टैब (वेबपेज) के लिए ब्राउज़र की क्षमता को हाईजैक करेगा, लेकिन उपयोगकर्ता केवल टेक्स्टबॉक्स से बाहर टैब कर सकते हैं और फिर दूसरे पृष्ठ पर टैब को नियंत्रित कर सकते हैं। पृष्ठ पर टैब के लिए ctrl + टैब का उपयोग करने के लिए एक संकेत होना चाहिए।

— जोसेफ मैकइंटायर

धन्यवाद @WillMartin जानकारी का बहुत मूल्यवान टुकड़ा। मैं इस बहुत महत्वपूर्ण बिंदु पर विचार किए बिना सभी textarea के लिए अपने पूरे ब्लॉग में एक ही बात को लागू करने जा रहा था।

— इमरान

Answer 4

इस लायक़ के लिए, यहाँ मेरा ऑनलाइनर है, इस धागे में आप सभी के बारे में क्या बात कर रहे हैं:

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

क्रोम, फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर और एज के नवीनतम संस्करणों में परीक्षण।

Comments

आप सर, अद्भुत हैं।

— NiCk न्यूमैन

मैं टैब के बजाय 4 रिक्त स्थान का उपयोग करने के लिए इस कोड को कैसे संशोधित कर सकता हूं? मैंने करने की कोशिश की & nbsp; चार बार लेकिन इसने अभी भी इसे एक ही स्थान में बदल दिया।

— जियाविझंग

NiCk, कृपया मेरी पत्नी को बताएं। jiaweizhang, '\ t' को '<4 रिक्त स्थान>' और 1 के साथ 4.

— elgholm

सबसे अच्छा जवाब!

— मार्को डेमायो

बहुत साफ, यहाँ SHIFT के माध्यम से रिवर्स है:if(event.shiftKey){if(v.substring(s-1,s)==='\t'){this.value=v.substring(0,s-1)+v.substring(e);this.selectionStart=this.selectionEnd=s-1;}}

— DonFuchs

Answer 5

यहाँ इस का मेरा संस्करण है, समर्थन करता है:

• टैब + शिफ्ट टैब
• सरल टैब वर्ण आवेषण के लिए पूर्ववत स्टैक बनाए रखता है
• ब्लॉक लाइन इंडेंट / अनइंडेंट का समर्थन करता है, लेकिन स्टैक को पूर्ववत करता है
• इंडेंट / अनइंडेंट को ब्लॉक करने पर पूरी तरह से लाइनों का चयन करता है
• एंट्री दबाने पर ऑटो इंडेंट का समर्थन करता है (स्टैक को पूर्ववत रखता है)
• अगले टैब पर एस्केप कुंजी रद्द समर्थन का उपयोग करें / कुंजी दर्ज करें (ताकि आप एस्केप को दबा सकते हैं फिर टैब आउट करें)
• 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>

Comments

यह यहाँ का सबसे अच्छा जवाब है।

— FourCinnamon0

यह jQuery के बिना थोड़ा सा काम करता है। मदद के लिए youmightnotneedjquery.com की जाँच करें। निश्चित रूप से यहां सबसे अच्छा जवाब है।

— जामुन होल्मग्रेन

Answer 6

आधुनिक तरीका है कि दोनों सीधे-आगे हैं और अंतिम परिवर्तनों को पूर्ववत (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:

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

---

संपादित करें:

जैसा कि टिप्पणी में बताया गया है (और जब यह "आधुनिक" समाधान था ), तो यह सुविधा पुरानी हो गई है। डॉक्स का हवाला देते हुए:

यह सुविधा अप्रचलित है। हालाँकि यह अभी भी कुछ ब्राउज़रों में काम कर सकता है, इसका उपयोग हतोत्साहित किया जाता है क्योंकि इसे किसी भी समय हटाया जा सकता है। इसके इस्तेमाल से बचने की कोशिश करें।

Comments

इस बिंदु पर यह एकमात्र सही उत्तर है। बहुत-बहुत धन्यवाद। O

— क्रिस कैलो

अफसोस की बात है कोई फ़ायरफ़ॉक्स समर्थन नहीं है। indent-textareaक्रॉस-ब्राउज़र समाधान के लिए प्रयास करें जो फ़ायरफ़ॉक्स में इस पद्धति + का उपयोग करता है।

— फ्रीगर्ल

फ़ायरफ़ॉक्स में, document.execCommandकेवल सेटिंग के बाद सक्षम हो जाता है document.designMode = "on";। मैं उन तत्वों में लिखने के लिए पाठ प्राप्त करने में सक्षम हूं जिनके पास है .contentEditable = 'true'। हालाँकि, जब मैं इसे एक textarea पर पूरा करने की कोशिश करता हूं, तो डाला गया textNode दस्तावेज़ के भीतर textarea के ठीक पहले रखा जाता है (बजाय textarea में)। कृपया मोज़िला को यहां से निकालने में मदद करें ।

— लोनी बेस्ट

ज्ञात हो, यह अब 'आधुनिक' नहीं माना जाता है, जिस पृष्ठ को आपने नोटों से जोड़ा है (लगभग execCommand): 'यह सुविधा अप्रचलित है। हालाँकि यह अभी भी कुछ ब्राउज़रों में काम कर सकता है, लेकिन इसके उपयोग को हतोत्साहित किया जाता है क्योंकि इसे किसी भी समय हटाया जा सकता है। इसके इस्तेमाल से बचने की कोशिश करें। '

— कासिमिर

Answer 7

मैं कहीं भी तेजी से एंगुलरजेएस के माहौल में @ कास्देगा के उत्तर का उपयोग करने की कोशिश कर रहा था, कुछ भी नहीं मैंने कोशिश की कि परिवर्तन पर कोणीय अधिनियम बनाने में सक्षम हो। इसलिए अगर यह राहगीरों के लिए किसी काम का नहीं है, तो यहाँ @ 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>

Comments

यह कॉल करने के लिए बहुत महत्वपूर्ण है element.triggerHandler('change');, अन्यथा मॉडल अपडेट नहीं किया जाएगा (वजह से element.triggerHandler('change');मुझे लगता है।

— अलवारो Flaño Larrondo

Answer 8

TAB कुंजी प्रेस को पकड़ने और रिक्त स्थान का एक गुच्छा सम्मिलित करने के लिए आपको JS कोड लिखना होगा। कुछ ऐसा ही जेएसफल्ड करता है।

जक्वरी फिडेल की जाँच करें :

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

Comments

साथ ही डिफ़ॉल्ट कार्रवाई को रोकने के लिए मत भूलना। event.preventDefault();

— रयान

लाइव को नए संस्करणों में बदल दिया गया है।

— एरिक हार्म्स

Event.which गुण event.keyCode और event.charCode को सामान्य करता है । आपको जांचने की आवश्यकता नहीं है e.keyCode || e.which।

— ट्रेवर

Answer 9

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

Comments

अब तक सबसे अच्छा समाधान है, लेकिन यह शायद एक चयन नहीं करना चाहिए जब start === end।

— एमपीएन

Answer 10

यह समाधान आपके विशिष्ट कोड संपादक की तरह पूरे चयन में टैबिंग की अनुमति देता है, और उस चयन को भी अनटैब करना है। हालाँकि, मुझे पता नहीं चला है कि जब चयन नहीं होता है तो शिफ्ट-टैब को कैसे लागू किया जाता है।

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

Comments

यह अच्छा काम करता है, लेकिन आप कम से कम चयन-टैब को सीमित कर सकते हैं जिसमें त्रुटियां फेंकने से कोई चयन नहीं होगा। मैंने इसे साधारण if (selected.length > 0) {...}

Answer 11

उन सभी के आधार पर, जो लोगों के जवाबों पर कहने के लिए किए गए थे, इसका सिर्फ कीडाउन का संयोजन है (कीप नहीं) + preventDefault () + कैरेट में एक टैब कैरेक्टर डालें। कुछ इस तरह:

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

पहले के उत्तर में एक काम करने वाला jsfiddle था लेकिन इसमें कीडाउन पर एक चेतावनी () का उपयोग किया गया था। यदि आप इस चेतावनी को हटाते हैं, तो यह काम नहीं करता है। मैं सिर्फ textarea में वर्तमान कर्सर स्थिति पर एक टैब डालने के लिए एक समारोह जोड़ा है।

यहाँ एक ही के लिए काम कर रहे jsfiddle: http://jsfiddle.net/nsHGZ/

Answer 12

मैं देख रहा हूं कि यह विषय हल नहीं हुआ है। मैंने इसे कोड किया और यह बहुत अच्छा काम कर रहा है। यह कर्सर इंडेक्स में सारणीकरण सम्मिलित करता है। 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>

Comments

यह कोड हालांकि, पूर्ववत ढेर को गड़बड़ कर देता है। एक टैब डालने के बाद, कभी-कभी आप कुछ भी पूर्ववत नहीं कर सकते हैं या केवल 1-2 कदम पीछे रह सकते हैं।

— मैग्नस एरिकसन 14

Answer 13

ALT दबाए रखें और संख्यात्मक कीपैड से 0,9 दबाएँ। यह google-chrome में काम करता है

Answer 14

मैंने एक ऐसा बनाया जिसे आप अपनी पसंद के किसी भी तत्व के साथ एक्सेस कर सकते हैं:

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>

Answer 15

मुझे लगता है कि वेनिला जावास्क्रिप्ट के साथ आधुनिक ब्राउज़रों में ऐसा करने का सबसे सरल तरीका है:

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

ध्यान दें कि मैंने सादगी के लिए इस स्निपेट में कई ईएस 6 सुविधाओं का उपयोग किया था, आप इसे तैनात करने से पहले संभवतः इसे (बैबल या टाइपस्क्रिप्ट के साथ) ट्रांसपाइल करना चाहेंगे।

Answer 16

उपरोक्त उत्तर सभी इतिहास को मिटा देते हैं। किसी के लिए एक समाधान की तलाश में जो ऐसा नहीं करता है, मैंने आखिरी घंटे क्रोम के लिए निम्नलिखित कोडिंग में बिताया:

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/

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

उदाहरण उपयोग: $('textarea').enableTabs('\t')

विपक्ष: केवल क्रोम पर ही काम करता है।

Comments

इस स्क्रिप्ट का कौन सा भाग केवल क्रोम में काम कर रहा है? यह "TextEvent" है? help.dottoro.com/lagstsiq.php/#TextEvent यह साइट कहती है कि इसे IE9 + और सफारी में भी काम करना चाहिए। चूंकि मुझे Chrome ऐप के लिए इसकी आवश्यकता है इसलिए यह एकदम सही है।

— एंड्रियास लिनर्ट

@ और लिंडर्ट आप सही हैं। यह IE और सफारी दोनों में काम करने के लिए प्रलेखित है। हालाँकि, इस लेखन के समय IE ने मेरे लिए काम नहीं किया, और मेरे पास अभी इसे आगे देखने का समय नहीं था, और मैंने सफारी में परीक्षण नहीं किया था। भ्रम के लिए क्षमा याचना। मुझे मदद करने में खुशी हुई।

— 20 न्यूटोमेशन

Answer 17

Wjbryant द्वारा टैब समर्थन के लिए Github पर एक पुस्तकालय है: wjbryant द्वारा टैब : ओवरराइड

यह इस तरह काम करता है:

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

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

Comments

एक बुरा जवाब नहीं है, लेकिन कोड को देखते हुए यह बहुत ही तकनीकों का उपयोग करता है जैसे कि यहां कुछ उत्तरों में वर्णित हैं: github.com/wjbryant/taboverride/blob/master/src/… । इसका मतलब यह है कि यह पूर्ववत इतिहास को संरक्षित नहीं करता है, जो कि मुख्य मुद्दा है।

— मिहाई

Answer 18

ऊपर के कोडस्गा के कोड के विकल्प के रूप में, वर्तमान मूल्य पर टैब को जोड़ने के बजाय, आप इसके बजाय वर्तमान कर्सर बिंदु पर वर्ण सम्मिलित कर सकते हैं। इसका लाभ है:

• टैब के विकल्प के रूप में आपको 4 स्थान सम्मिलित करने की अनुमति देता है
• पूर्ववत और फिर से डाले गए पात्रों के साथ काम करेगा (यह ओपी के साथ नहीं होगा)

इसलिए प्रतिस्थापित करें

    // 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, '    ');

Answer 19

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

Answer 20

इस सरल 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();

Answer 21

मुझे इसे करने के लिए एक फ़ंक्शन बनाना था, इसका उपयोग करना सरल है, बस इस कोड को अपनी स्क्रिप्ट में कॉपी करें और उपयोग करें: enableTab( HTMLElement )HTMLele कुछ इस तरह से किया जा रहा है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}}}

Answer 22

प्रत्येक इनपुट में एक textarea तत्व एक onkeydown घटना है। ईवेंट हैंडलर में आप जब भी event.keyventDefault () का उपयोग करके टैब कुंजी की डिफ़ॉल्ट प्रतिक्रिया को रोक सकते हैं ।

फिर सही स्थिति में एक टैब साइन इन करें:

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

एचटीएमएल

<textarea></textarea>

Answer 23

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

Answer 24

सरल स्टैंडअलोन स्क्रिप्ट:

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

Answer 25

यदि आपको वास्तव में टैब की आवश्यकता है तो शब्द या नोटपैड से एक टैब कॉपी करें और जहां आप चाहते हैं, उसे टेक्स्ट बॉक्स में पेस्ट करें

१ २ ३

१२ २२ ३३

दुर्भाग्य से मुझे लगता है कि वे इन टिप्पणियों से टैब हटा देते हैं, :) यह आपके POST या GET में% 09 के रूप में दिखाई देगा

Comments

मुझे लगता है कि यह एक जवाब है, हालांकि यह एक बहुत बुरा है। यह एक वैकल्पिक दृष्टिकोण का सुझाव दे रहा है, अर्थात अंतिम उपयोगकर्ता को एक वर्कअराउंड दे रहा है।

— जीएस -