টেক্সারিয়ায় ইনডেন্ট করতে ট্যাবটি ব্যবহার করুন

143

আমার পাশে একটি সহজ এইচটিএমএল টেক্সারিয়া আছে। এই মুহুর্তে আপনি যদি এটিতে ট্যাব ক্লিক করেন তবে এটি পরবর্তী ক্ষেত্রে যায়। আমি পরিবর্তে কয়েকটি স্পেসে ট্যাব বোতামটি ইন্ডেন্ট করতে চাই। কিভাবে আমি এটি করতে পারব? ধন্যবাদ।

html  textarea 
— user780483
সূত্র
এটি জাভাস্ক্রিপ্টের সাহায্যে সক্ষম, এবং একটি জেএস লাইব্রেরি ব্যবহার করে প্রায় সহজ। আপনি কি এই বিকল্পগুলির কোনওটিই ব্যবহার করতে পারবেন?
— ডেভিড মনিকা
আপনার পরিবেশ কি? জাভাস্ক্রিপ্ট, জকোয়ারি, অন্য কিছু?
— কাশদেগ
@ ডেভিড আমি ত্রুটিযুক্তভাবে এর মধ্যে যে কোনওটি ব্যবহার করতে পারি
— user780483
আমি .ফোকাস () এবং। কিডাউন ()
— কাসদেগা
8
— ক্যাস্পার ক্লিজেন

উত্তর:

120

অনুরূপ প্রশ্নের অন্যান্য উত্তরগুলি থেকে প্রচুর orrowণ নেওয়া (নীচে পোস্ট করা) ...

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

— kasdega
সূত্র
13
"$ (এই) .get (0) .selectionStart"। মাত্র "this.selectionStart" ব্যবহার করুন
— বোহদান
আপনি কি এটি একটি \ t এর পরিবর্তে 4 টি স্পেস দিয়ে কাজ করতে পারবেন? যদি আপনি "" এর সাথে replace t প্রতিস্থাপন করেন এটি স্থানগুলি সন্নিবেশ করবে তবে ক্যারেটটি পিছনে ছেড়ে দেবে।
— সিনায়েস্টিক
@ সিনেস্টেথিক - দেরিতে জবাব, তবে ক্যারেটটি সরাতে, 'স্টার্ট + 1' এর পরিবর্তে 'লাইন + 4' হতে শেষ লাইনটি সামঞ্জস্য করুন
— নেভাডা_স্কাউট
4
আমি সাধারণত স্ট্যাকওভারফ্লো থেকে কোড অনুলিপি করি না এবং এটি আমার প্রকল্পে আটকান এবং এটিতে কাজ করা হয়, তবে আমি যখন করি তখন এটি এই কোড ছিল। এর জন্য ধন্যবাদ.
— ফ্ল্যাট বিড়াল
10
এটি ব্রাউজারের পূর্বাবস্থায় ফিরিয়ে আনার বৈশিষ্ট্য (Ctrl + z) ভঙ্গ করে।
— 01 আউটমোনকি
54 
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 প্রয়োজন হয় না এবং কোনও পৃষ্ঠার সমস্ত টেক্সারিগুলিতে ট্যাব কার্যকারিতা সক্ষম করে।

— user1949974
সূত্র
আপনি কি এটি একটি \ t এর পরিবর্তে 4 টি স্পেস দিয়ে কাজ করতে পারবেন? যদি আপনি "" এর সাথে replace t প্রতিস্থাপন করেন এটি স্থানগুলি সন্নিবেশ করবে তবে ক্যারেটটি পিছনে ছেড়ে দেবে।
— সিনায়েস্টিক
1
@ সিনেস্টেথিক: হ্যাঁ, আপনি স্পেসে ট্যাব পরিবর্তন করতে পারেন, তবে আপনাকে কিছুটা কোড মানিয়ে নিতে হবে (একের পরিবর্তে এখানে 3-4 টি নতুন বর্ণ রয়েছে)। অন্য বিকল্পটি হ'ল সিএসএস ট্যাব-আকার।
— অ্যাড্রিয়ান মায়ার
@ সিনেস্টেথিক হ্যাঁ, কেবল শেষ লাইনের this.selectionEnd = s+1;সাথে প্রতিস্থাপন করুন this.selectionEnd = s + "\t".length;। কোনও ভেরিয়েবল বা ফাংশন প্যারামিটার ব্যবহার করা এবং সেখানে ইনডেন্টেশন চর (গুলি) সঞ্চয় করা পরিষ্কার হবে। তবে আপনি কী এখন প্রতিস্থাপন করবেন তা জানেন: +1ক্যারেটটি কতটা সরানো হয়েছে তা নির্ধারণ করে।
— স্ট্যান
2
KeyboardEvent.keyCodeএবং KeyboardEvent.whichঅবচিত সম্পত্তি are KeyboardEvent.keyপরিবর্তে ব্যবহার করুন।
— Ван
48

অন্যরা যেমন লিখেছেন, আপনি ইভেন্টটি ক্যাপচার করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন, ডিফল্ট ক্রিয়াটি আটকাতে পারেন (যাতে কার্সার ফোকাসটি পরিবর্তন না করে) এবং একটি ট্যাব অক্ষর সন্নিবেশ করতে পারে।

কিন্তু , ডিফল্ট আচরণটি অক্ষম করা মাউস ব্যবহার না করে পাঠ্য অঞ্চল থেকে ফোকাস সরিয়ে নেওয়া অসম্ভব করে তোলে। অন্ধ ব্যবহারকারীরা কীবোর্ড এবং অন্য কিছু ব্যবহার করে ওয়েব পৃষ্ঠাগুলির সাথে ইন্টারঅ্যাক্ট করে - তারা মাউস পয়েন্টারটিকে এটির সাথে দরকারী কিছু করতে দেখতে পারে না, তাই এটি কীবোর্ড বা কিছুই নয়। ট্যাব কীটি নথিটি এবং বিশেষত ফর্মগুলি নেভিগেট করার প্রাথমিক উপায়। ট্যাব কী-এর ডিফল্ট আচরণকে ওভাররাইড করা অন্ধ ব্যবহারকারীদের ফোকাসটিকে পরবর্তী ফর্মের উপাদানটিতে সরিয়ে নেওয়া অসম্ভব করে তুলবে।

সুতরাং, যদি আপনি কোনও বিস্তৃত দর্শকের জন্য কোনও ওয়েবসাইট লিখছেন তবে আমি বাধ্যতামূলক কারণ ছাড়াই এটি করার বিরুদ্ধে সুপারিশ করব এবং অন্ধ ব্যবহারকারীদের জন্য এমন একধরণের বিকল্প বিকল্প সরবরাহ করব যা তাদের পাঠ্যক্রমে আটকাবে না।

— উইল মার্টিন
সূত্র
2
ধন্যবাদ. আমি রুদ্র শব্দ বলতে চাই না, তবে আমি জানতাম না যে অন্ধ লোকেরা কম্পিউটার ব্যবহার করে। আমি এটি মনে
— রাখব
10
এটা ঠিক আছে, অনেক লোক জানেন না; এটা তাদের অভিজ্ঞতার বাইরে। এখানে একটি পরিচিতি দেওয়া হয়েছে: webaim.org/intro
— উইল মার্টিন
হ্যাঁ সত্যিই খারাপ ধারণা এটি যদি সাধারণ দর্শকদের জন্য ওয়েবসাইট হয়। স্ক্রিন রিডার ব্যবহারকারীদের পাশাপাশি, আরও অনেক ব্যবহারকারী রয়েছেন যা বিভিন্ন কারণে কীবোর্ডের সাহায্যে নেভিগেট করতে হবে, বা বেছে নেওয়া উচিত। ট্যাব কীটি আটকে ফর্মটি কমপক্ষে বিরক্তিকর এবং এই ব্যবহারকারীদের পক্ষে সম্ভবত ব্যবহারের অযোগ্য make
— স্টিভ্যাক্স
6
হতে পারে নিয়ন্ত্রণ + ট্যাব ব্যবহার করুন। এটি ব্রাউজারগুলিকে অন্যান্য ট্যাবগুলিতে (ওয়েবপৃষ্ঠাগুলি) হাইজ্যাক করবে, তবে ব্যবহারকারীরা কেবল পাঠ্যবক্সের বাইরে ট্যাব করতে পারেন এবং তারপরে অন্য পৃষ্ঠায় ট্যাব নিয়ন্ত্রণ করতে পারেন। পৃষ্ঠায় একটি ইঙ্গিত থাকা উচিত ট্যাবটির জন্য ctrl + ট্যাব ব্যবহার করা।
— জোসেফ ম্যাকআইন্টির
ধন্যবাদ @ উইলমার্টিন অত্যন্ত মূল্যবান তথ্য। আমি খুব গুরুত্বপূর্ণ বিষয়টিকে বিবেচনা না করেই সমস্ত টেক্সারিয়ার জন্য আমার সম্পূর্ণ ব্লগে একই জিনিসটি বাস্তবায়ন করতে যাচ্ছিলাম।
— ইমরান
40

এটির মূল্যের জন্য, এখানে আমার অনলাইনার, আপনারা সকলেই এই থ্রেডে কী কথা বলছেন:

<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>
স্নিপেট প্রসারিত করুন

ক্রোম, ফায়ারফক্স, ইন্টারনেট এক্সপ্লোরার এবং এজের সর্বশেষতম সংস্করণগুলির পরীক্ষক।

— elgholm
সূত্র
আপনি স্যার, আশ্চর্যজনক।
— নাইক নিউম্যান
1
আমি কীভাবে এই ট্যাবটির পরিবর্তে 4 টি স্পেস ব্যবহার করতে এই কোডটি সংশোধন করতে পারি? আমি চেষ্টা করেছি & nbsp; চারবার কিন্তু এটি এখনও এটি একটি একক জায়গায় রূপান্তরিত করে।
— jiaweizhang
5
NiCk, দয়া করে আমার স্ত্রীকে বলুন। জিয়াউইজহ্যাং, '4 টি' এর সাথে '<4 স্পেস>' এবং 1 দিয়ে 4
— প্রতিস্থাপন করুন
1
সেরা উত্তর!
— মার্কো ডেমাইও
1
খুব ঝরঝরে, 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;}}
— ডনফুচস
12

এখানে এটির আমার সংস্করণটি সমর্থন করে:

  • ট্যাব + শিফট ট্যাব
  • সাধারণ ট্যাব অক্ষর সন্নিবেশগুলির জন্য পূর্বাবস্থায় স্ট্যাক বজায় রাখে
  • ব্লক লাইন ইন্ডেন্ট / আনইন্ডেন্ট সমর্থন করে তবে ট্র্যাশগুলি পূর্বাবস্থায় ফেলা হবে
  • সঠিকভাবে সম্পূর্ণ লাইন নির্বাচন করে যখন ব্লক ইনডেন্ট / আনইন্ডেন্ট হয়
  • এন্টার টিপলে অটো ইন্ডেন্ট সমর্থন করে (পূর্বে স্তুপ বজায় রাখে)
  • পরের ট্যাবে এস্কিপ কী সমর্থন সমর্থন করুন / কী প্রবেশ করান (যাতে আপনি এস্কেপ চাপতে পারেন তবে ট্যাব আউট করতে পারেন)
  • ক্রোম + এজ এ কাজ করে, অন্যদের অন্বেষণ করে।

$(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>
স্নিপেট প্রসারিত করুন

— ব্র্যাড রবিনসন
সূত্র
1
এটি এখানে সেরা উত্তর।
— ফোরসিনামন 0
এটি jQuery ছাড়াই কিছুটা কাজ করে। সহায়তার জন্য youmightnotneedjquery.com দেখুন। অবশ্যই এখানে সেরা উত্তর।
— জ্যামন হল্মগ্রেন
10

আধুনিক উপায় যে উভয় সোজা সম্মুখগামী এবং হারান না পূর্বাবস্থা করার ক্ষমতা করুন (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:

সম্পাদনা:

মন্তব্যে উল্লেখ করা হয়েছে (এবং এটি একবার "আধুনিক" সমাধান ছিল ), বৈশিষ্ট্যটি অচল হয়ে গেছে। দস্তাবেজগুলি উদ্ধৃত করা হচ্ছে:

এই বৈশিষ্ট্যটি অপ্রচলিত। যদিও এটি এখনও কিছু ব্রাউজারে কাজ করতে পারে তবে এটি যে কোনও সময় মুছে ফেলা হতে পারে বলে এর ব্যবহারকে নিরুৎসাহিত করা হয়। এটি ব্যবহার এড়াতে চেষ্টা করুন।

— ইয়ম এস।
সূত্র
3
এই মুহুর্তে এটিই সঠিক উত্তর। বিশাল আপনাকে ধন্যবাদ। 🙏
— ক্রিস কালো
2
দুর্ভাগ্যক্রমে কোনও ফায়ারফক্স সমর্থন করে না। indent-textareaক্রস-ব্রাউজার সমাধানের জন্য চেষ্টা করুন যা এই পদ্ধতিটি + ফায়ারফক্সে একটি ফ্যালব্যাক ব্যবহার করে।
— ফ্রেগান্ট
ফায়ারফক্সে document.execCommandকেবল সেটিংস করার পরে সক্ষম হয়ে যায় document.designMode = "on";। আমি আছে যে উপাদানগুলিতে লিখতে পাঠ্য পেতে সক্ষম .contentEditable = 'true'। যাইহোক, আমি যখন এটি কোনও টেক্সটরিয়ায় সম্পন্ন করার চেষ্টা করি, সন্নিবেশ করা পাঠ্য নোড ডকুমেন্টের ভিতরে টেক্সটরিয়ার ঠিক আগে (টেক্সারিয়ায় না রেখে) স্থাপন করা হয়। দয়া করে এখানে মজিলাকে চিত্রিত করতে সহায়তা করার চেষ্টা করুন ।
— লনি সেরা
সচেতন থাকুন, এটি আর 'আধুনিক' হিসাবে বিবেচিত হবে না, যে পৃষ্ঠায় আপনি লিখিত নোটগুলি (সম্পর্কে execCommand): 'এই বৈশিষ্ট্যটি অপ্রচলিত। যদিও এটি এখনও কিছু ব্রাউজারে কাজ করতে পারে তবে এটি যে কোনও সময় মুছে ফেলা হতে পারে বলে এর ব্যবহারকে নিরুৎসাহিত করা হয়। এটি ব্যবহার এড়াতে চেষ্টা করুন। '
— কাসিমির
9

অ্যাংুলারজেএস পরিবেশে @ কাশদেগের উত্তরটি ব্যবহার করার চেষ্টা আমি আর কোথাও পাচ্ছিলাম না, যা চেষ্টা করেছি তার কিছুই পরিবর্তন সম্পর্কে কৌণিক অভিনয় করতে সক্ষম বলে মনে হচ্ছে না। সুতরাং এটির দ্বারা যাত্রীদের কোনও কাজে আসার ক্ষেত্রে, এখানে @ কাসেদেগা কোড, অ্যাংুলারজেএস স্টাইলের পুনর্লিখন করা হয়েছে, যা আমার পক্ষে কাজ করেছে:

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>
— stovroz
সূত্র
কল করা খুব জরুরি element.triggerHandler('change');, অন্যথায় মডেলটি আপডেট হবে না (কারণ element.triggerHandler('change');আমি মনে করি।
— আলভারো ফ্ল্যাও ল্যারোনডো
6

আপনাকে টিএবি কী টিপতে জেএস কোড লিখতে হবে এবং একগুচ্ছ জায়গা .োকাতে হবে। জেএসফিডাল যা করে তার অনুরূপ কিছু।

জ্যাকুরি ফিডল পরীক্ষা করুন :

এইচটিএমএল :

<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');
  } 
});
​
— আজিজ শায়খ
সূত্র
2
পাশাপাশি ডিফল্ট ক্রিয়া প্রতিরোধ করতে ভুলবেন না। event.preventDefault();
— রায়ান
2
নতুন সংস্করণে লাইভ প্রতিস্থাপন করা হয়েছে।
— এরিক ক্ষতিকারক
— ট্রেভর
6

@ কাসদেগা সমাধানের ভিত্তিতে একাধিক-লাইন ইন্ডেটেশন স্ক্রিপ্ট।

$('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;
    }
});
— মার্টিন
সূত্র
1
এখন পর্যন্ত সেরা সমাধান, তবে এটি সম্ভবত কোনও নির্বাচন তৈরি করা উচিত নয় start === end।
— এমপেন
6

এই সমাধানটি আপনার সাধারণ কোড সম্পাদকের মতো একটি সম্পূর্ণ নির্বাচনে ট্যাবিংয়ের অনুমতি দেয় এবং সেই নির্বাচনটিকেও নিষ্ক্রিয় করে রাখে। তবে, যখন কোনও নির্বাচন নেই তখন শিফট-ট্যাব কীভাবে প্রয়োগ করতে হবে তা আমি খুঁজে পাইনি।

$('#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>
স্নিপেট প্রসারিত করুন

— mpen
সূত্র
এটি ভাল কাজ করে, তবে আপনি নিক্ষেপ ত্রুটি থেকে কোনও নির্বাচন ছাড়াই শিফট-ট্যাব সীমাবদ্ধ করতে পারেন। আমি এটি সহজ if (selected.length > 0) {...}ফিডল দিয়ে করেছি: jsfiddle.net/jwfkbjkr
3

উত্তরের উপরে লোকেরা যা বলতে চেয়েছিল তার উপর ভিত্তি করে এটি কেবল কীডাউন (কীপআপ নয়) এর সংমিশ্রণ + প্রতিরোধ ডিফল্ট () + ক্যারেটে একটি ট্যাব অক্ষর প্রবেশ করান। কিছুটা এইরকম:

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

পূর্বের উত্তরে একটি কার্যনির্বাহী jsfiddle ছিল তবে এটি কী-ডাউনটিতে একটি সতর্কতা () ব্যবহার করেছে। আপনি যদি এই সতর্কতাটি সরিয়ে ফেলেন তবে তা কার্যকর হয়নি। আমি টেক্সারিয়ায় কার্সারের বর্তমান অবস্থানে একটি ট্যাব সন্নিবেশ করার জন্য একটি ফাংশন যুক্ত করেছি।

এখানে একই কাজের জন্য কাজ করছেন: http://jsfiddle.net/nsHGZ/

— walmik
সূত্র
3

আমি দেখছি এই বিষয়টির সমাধান হয়নি। আমি এটিকে কোড করেছিলাম এবং এটি খুব ভালভাবে কাজ করছে। এটি কার্সার সূচীতে একটি সারণী সন্নিবেশ করায়। 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>
— Bibimission
সূত্র
2
এই কোডটি পূর্বাবস্থায় স্ট্যাকটি বিশৃঙ্খলা করে। ব্যবহারের পরে কোনও ট্যাব sertোকান, কখনও কখনও আপনি কোনও কিছুই পূর্বাবস্থায় ফেরাতে পারবেন না বা কেবল 1-2 ধাপ পিছনে যেতে পারেন।
— ম্যাগনাস এরিকসন
2

ALT টিপুন এবং সংখ্যা কিপ্যাড থেকে 0,9 টিপুন। এটি গুগল-ক্রোমে কাজ করে

— শ্রীকৃষ্ণ
সূত্র
2

আমি এমন একটি তৈরি করেছি যা আপনার পছন্দ মতো কোনও পাঠ্য উপাদান দিয়ে অ্যাক্সেস করতে পারবেন:

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>
— হেলেনা বেইলি
সূত্র
2

সহজ উপায় আমি কি করতে সেখানে পাওয়া গেছে আধুনিক ব্রাউজারে সঙ্গে ভ্যানিলা জাভাস্ক্রিপ্ট হল:

  <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 বৈশিষ্ট্য ব্যবহার করেছি, আপনি সম্ভবত এটি স্থাপনের আগে এটি (ব্যাবেল বা টাইপস্ক্রিপ্ট সহ) ট্রান্সিলিপ করতে চাইবেন।

— টেল্মো ট্রুপার
সূত্র
1

উপরের উত্তরগুলি সমস্ত পূর্বাবস্থায় ফেলা ইতিহাস মুছবে। যে সমাধান না করে এমন সমাধানের সন্ধানের জন্য, আমি 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 এ কাজ করে।

— iautomation
সূত্র
এই স্ক্রিপ্টের কোন অংশটি কেবল ক্রোমে কাজ করছে? এটি কি "পাঠ্যক্রম"? help.dottoro.com/lagstsiq.php/#TextEvent এই সাইটটি বলছে এটি আই 9 9 + এবং সাফারিতেও কাজ করা উচিত। যেহেতু ক্রোম অ্যাপের জন্য আমার এটির প্রয়োজন এটি নিখুঁত।
— আন্দ্রে লিনার্ট
@ আন্ড্রেয়াস লানার্ট আপনি ঠিক বলেছেন। এটি IE এবং সাফারি উভয় ক্ষেত্রেই ডকুমেন্টেড রয়েছে। যাইহোক, এই লেখার সময় আইই আমার পক্ষে কাজ করেনি, এবং আমার আরও সহজভাবে এটি আরও দেখার জন্য সময় ছিল না, এবং আমি সাফারিতে পরীক্ষাও করিনি। বিভ্রান্তির জন্য দুঃখিত। আমি সাহায্য করে খুশি।
— iautomation
0

Wjbryant দ্বারা আপনার টেক্সারিয়াসে ট্যাব সমর্থনের জন্য গিথুবতে একটি গ্রন্থাগার রয়েছে: ট্যাব ওভাররাইড

এটা এভাবে কাজ করে:

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

// enable Tab Override for all textareas
tabOverride.set(textareas);
— Pho3nixHun
সূত্র
কোনও খারাপ উত্তর নয়, তবে কোডটি দেখে এটি বেশ কয়েকটি একই কৌশলগুলি ব্যবহার করেছে যা এখানে কয়েকটি উত্তরে বর্ণিত হয়েছে: github.com/wjbryant/taboverride/blob/master/src/… । এর অর্থ এটি পূর্বাবস্থার ইতিহাস সংরক্ষণ করে না, যা মূল সমস্যা the
— মিহাই
0

উপরের কাসদেগা কোডের বিকল্প হিসাবে, বর্তমান মানটিতে ট্যাব সংযোজন করার পরিবর্তে আপনি বর্তমান কার্সার পয়েন্টে অক্ষরগুলি সন্নিবেশ করতে পারেন। এর সুবিধা রয়েছে:

  • আপনাকে ট্যাবের বিকল্প হিসাবে 4 টি স্পেস সন্নিবেশ করতে দেয়
  • পূর্বাবস্থায় ফিরুন এবং পুনরায় করা inোকানো অক্ষরগুলির সাথে কাজ করবে (এটি অপের সাথে হবে না)

সুতরাং প্রতিস্থাপন

    // 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, '    ');
— dyg
সূত্র
-1 
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;
    }
}
— razorxan
সূত্র
-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();
-1

একই কাজ করতে আমাকে একটি ফাংশন করতে হয়েছিল, এটি ব্যবহার করা সহজ, কেবল আপনার স্ক্রিপ্টে এই কোডটি অনুলিপি করুন এবং ব্যবহার করুন: enableTab( 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}}}
— Dendromaniac
সূত্র
-1

প্রতিটি ইনপুট একটি টেক্সারিয়ার উপাদানটিতে একটি অনকিডাউন ইভেন্ট থাকে। ইভেন্ট হ্যান্ডলারে আপনি ইভেন্ট.প্রিভেন্টডাফল্ট () ব্যবহার করে ট্যাব কী-এর ডিফল্ট প্রতিক্রিয়াটি প্রতিরোধ করতে পারবেন যখনই ইভেন্ট.কি কোড নয় is।

তারপরে সঠিক অবস্থানে একটি ট্যাব সাইন রাখুন:

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>
— মার্টিন ওয়ানটেক
সূত্র
-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

সাধারণ স্বতন্ত্র লিপি:

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;
        }
    }
}
— lama12345
সূত্র
-3

আপনার যদি সত্যিই ট্যাবগুলির প্রয়োজন হয় তবে শব্দ বা নোটপ্যাড থেকে কোনও ট্যাব অনুলিপি করুন এবং এটি আপনি চান পাঠ্য বাক্সে পেস্ট করুন

1 2 3

12 22 33

দুর্ভাগ্যক্রমে আমি মনে করি তারা এই মন্তব্যগুলি থেকে ট্যাবগুলি সরিয়েছেন :) এটি আপনার পোষ্ট বা জিইটি-তে% 09 হিসাবে প্রদর্শিত হবে

— user4686585
সূত্র
2
আমি সত্যিই খারাপ উত্তর হলেও এটি একটি উত্তর বলে মনে করি। এটি বিকল্প পদ্ধতির পরামর্শ দিচ্ছে, অর্থাত্ শেষ ব্যবহারকারীকে একঝাঁক কাজ দেওয়া।
— জিএস - মনিকা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.