এইচটিএমএল টেক্সারিয়ায় লাইন ব্রেক কীভাবে যুক্ত করবেন?


156

আমি <textarea>জাভাস্ক্রিপ্ট দিয়ে একটি সম্পাদনা করছি । সমস্যাটি হ'ল আমি যখন এতে লাইন ব্রেক করি তখন তারা প্রদর্শিত হয় না। কিভাবে আমি এটি করতে পারব?

আমি একটি ফাংশন লিখতে মান পাচ্ছি, তবে এটি লাইন ব্রেক দেয় না।


রেজিেক্স এবং <pre></pre>সমাধানগুলির সাথে কোডেপেন ডেমো এখানে উন্মুক্ত করা হয়েছে: codepen.io/a-guerrero/pen/grgVBo
a.guerrero.g87

উত্তর:


265

সমস্যাটি এই সত্য থেকে আসে যে লাইন ব্রেক ( \n\r?) এইচটিএমএল <br/>ট্যাগের মতো নয়

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');

হালনাগাদ

যেহেতু অনেক মন্তব্য এবং আমার নিজের অভিজ্ঞতা আমাকে দেখিয়েছে যে <br> সমাধানটি এখানে প্রত্যাশার মতো কাজ করছে না এটি কীভাবে textarea'\ r \ n' ব্যবহার করে একটি নতুন লাইন যুক্ত করা যায় তার একটি উদাহরণ

function log(text) {
    var txtArea ;

    txtArea = document.getElementById("txtDebug") ;
    txtArea.value +=  text + '\r\n';
}

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


7
এটি আমার পক্ষেও কাজ করে। JQuery এ আপনি এর মতো কিছু করতে পারেন: $ ('# ক্যাপশন') h html ($ ('# ক্যাপশন') text পাঠ্য () replace প্রতিস্থাপন (/ \ n \ r? / G, '<br />')) ;
ডেভগার্সিয়া

2
লাইন ব্রেক বিরতি রেজিপেক্সটি টেক্সটফিক্সার হতে হবে / /(\r\n|\n|\r)/gm টিউটোরিয়ালস
জাভাস্ক্রিপ্ট-

3
ডান রেজেক্স /\r\n?|\n/gক্যাপচার ছাড়াই, কোনও মাল্টলাইন নয়।
এমারুকুজ

5
সন্দেহজনক <br>ভুল। একটি জন্য একটি পাঠ্য এলাকা মধ্যে সার্বজনীন লাইন বিরতি যদি আপনি চান \r\n। উদাহরণস্বরূপ, ইউসি ব্রাউজারটি পাঠ্যগ্রন্থে <br> এবং ign n উপেক্ষা করে। এইচটিএমএল পাঠ্যের ক্ষেত্রে একটি লাইন ব্রেক ব্রেক দেখুন ।
বব স্টেইন

2
কোনও টেক্সারিয়ার ভিতরে <br> ব্যবহার কাজ করছে না। কমপক্ষে ক্রোমে নেই, যেখানে আমি পরীক্ষা করেছি। যদিও seem n ব্যবহার করা কার্যকর হবে বলে মনে হচ্ছে। আপনি যদি নিখুঁত এইচটিএমএল হিসাবে কোনও পাঠ্য সন্নিবেশ করানোর উদ্দেশ্যে থাকেন তবে কোনও ইনপুট উপাদানের বাইরে <br>
স্নোরভার্গ

24

আপনি যদি সাধারণ জাভা স্ক্রিপ্ট ব্যবহার করেন এবং আপনার তখন পাঠ্য ক্ষেত্রের মানকে স্ট্রিং নির্ধারণ করতে হবে

 document.getElementById("textareaid").value='texthere\\\ntexttext'.

আপনি প্রতিস্থাপন \nবা < br >করতে হবে\\\n

অন্যথায় এটি Uncaught SyntaxError: Unexpected token ILLEGALসমস্ত ব্রাউজারে দেয় ।


18

কেউ এটি দরকারী খুঁজে পেতে পারে:

আমার লাইন ব্রেকগুলির সাথে সমস্যা ছিল যা সার্ভার ভেরিয়েবল থেকে জাভাস্ক্রিপ্ট ভেরিয়েবলে প্রেরণ করা হয়েছিল, এবং তারপরে জাভাস্ক্রিপ্ট সেগুলি টেক্সারিয়ায় লিখছিল (নকআউট.জেএস এর মান বাইন্ডিং ব্যবহার করে)।

সমাধানটি নতুন লাইনগুলিতে ডাবল পলায়ন ছিল:

orginal.Replace("\r\n", "\\r\\n")

সার্ভারের দিকে, কারণ কেবলমাত্র একক পালানোর সাথে জাভাস্ক্রিপ্ট পার্স করা হয়নি।


"\\ n" ব্যবহার করা উইন্ডোজে আমার জন্য কাজ করে এবং আমি ধরে নিই এটি লিনাক্স সিস্টেমে কাজ করবে।
সামিহ এ


6

আপনি যদি নিজের পৃষ্ঠাতে টেক্সট প্রদর্শন করতে চান তবে আপনি <pre>ট্যাগটি ব্যবহার করতে পারেন ।

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});
<textarea placeholder="type text here"></textarea>
<pre style="font-family: inherits">
The
new lines will
be respected
      and spaces too
</pre>


3

একটি নতুন লাইন ব্রাউজারের কেবল শ্বেতস্থান এবং কোনও কোনও সাধারণ স্পেসের সাথে আলাদা করা হবে না ("")। একটি নতুন লাইন পেতে, আপনাকে অবশ্যই <BR />উপাদানগুলি sert োকাতে হবে।

সমস্যাটি সমাধানের জন্য আরেকটি প্রচেষ্টা: পাঠ্যকে টেক্সারিয়ায় টাইপ করুন এবং তারপরে অদৃশ্য অক্ষরগুলিকে পাঠযোগ্য কিছুতে রূপান্তর করতে একটি বোতামের পিছনে কিছু জাভাস্ক্রিপ্ট যুক্ত করুন এবং ফলাফলটিকে একটিতে ডাম্প করুন DIV। এটি আপনাকে জানাবে যে আপনার ব্রাউজারটি কী চায়।


3

আমার আইডি সহ একটি টেক্সারিয়া আছে # ইনফোআর্টিস্ট অনুসরণ করুন:

<textarea id="infoartist" ng-show="dForm" style="width: 100%;" placeholder="Tell your contacts and collectors about yourself."></textarea>

জাভাস্ক্রিপ্ট কোডে আমি টেক্সারিয়ার মান পেয়ে যাব এবং নতুন লাইনের (\ n \ r) প্লেসকে <br />ট্যাগ দ্বারা প্রতিস্থাপন করব , যেমন:

var text = document.getElementById("infoartist").value;
text = text.replace(/\r?\n/g, '<br />');

সুতরাং আপনি যদি jquery ব্যবহার করছেন (আমার মত):

var text = $("#infoartist").val();
text = text.replace(/\r?\n/g, '<br />');

আশা করি এটি আপনাকে সহায়তা করেছে। :-)


0

আপনার যদি প্রয়োজন মাত্র টেস্টেরিয়ার মানটি লাইন ব্রেকগুলির সাথে সার্ভারে nl2br ব্যবহার করুন


0

আমার একই সমস্যার জন্য আমি যা করেছি তা এখানে।

আমি যখন জেএসপিতে পরবর্তী পৃষ্ঠায় পাঠ্যটি পাঠিয়ে দিচ্ছি, তখন আমি এ জাতীয় কিছু পড়ার পরিবর্তে পাঠ্যপাঠ হিসাবে এটি পড়ছি

সুতরাং আপনি চান হিসাবে আউটপুট এসেছিল। এবং অন্যান্য বৈশিষ্ট্যগুলির জন্য, আপনি নীচের হিসাবে ব্যবহার করতে পারেন।

<textarea style="background-color: white; border: none; width:660px;font-family: Arial, Helvetica, sans-serif; font-size:1.0em; resize:none;" name="text" cols="75" rows="15" readonly="readonly" ><s:property value="%{text}"/></textarea>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.