ইনপুট টাইপ = "পাঠ্য" উপাদান এইচটিএমএল / সিএসএসের ভিতরে পাঠানো মোড়ক

Question 1

নীচে প্রদর্শিত এইচটিএমএল,

<input type="text"/>

যেমন একটি ব্রাউজারে প্রদর্শিত হয়:
উপরের এইচটিএমএলটি ব্রাউজারে এভাবে প্রদর্শিত হয়।

আমি যখন নিম্নলিখিত পাঠ্য যুক্ত করি,

দ্রুত ব্রাউন শিয়ালটি অলস কুকুরটির উপরে লাফিয়ে উঠল।

নীচের এইচটিএমএল ব্যবহার করে,

<input type="text" value="The quick brown fox jumped over the lazy dog."/>

এটি যেমন একটি ব্রাউজারে প্রদর্শিত হয়:
উপরের এইচটিএমএলটি ব্রাউজারে এভাবে প্রদর্শিত হয়।

তবে আমি এটির মতো ব্রাউজারে প্রদর্শিত হতে চাই:
এইভাবে আমি উপরের এইচটিএমএলটি ব্রাউজারে প্রদর্শিত হতে চাই।

আমি চাই আমার ইনপুট উপাদানটির পাঠ্যটি মোড়ানো হোক। এটা কি টেক্সটরিয়া ছাড়া সম্পন্ন করা যায়?

Question 2

textareaমাল্টিলাইন পাঠ্য ইনপুটটির জন্য এটিই কাজ। প্রভু input এটা করবেন না ; এটি এটি করার জন্য ডিজাইন করা হয়নি।

সুতরাং একটি ব্যবহার textarea। তাদের ভিজ্যুয়াল পার্থক্য ছাড়াও, তারা একইভাবে জাভাস্ক্রিপ্টের মাধ্যমে অ্যাক্সেস পেয়েছে ( valueসম্পত্তি ব্যবহার করুন )।

আপনি inputইভেন্টের মাধ্যমে প্রবেশ করে নতুনভাবে রোধ করতে পারেন এবং কেবলমাত্র একটি ব্যবহার করে replace(/\n/g, '')।

Question 3

ওয়ার্ড ব্রেক কিছু অভিপ্রায় অনুকরণ করবে

    input[type=text] {
        word-wrap: break-word;
        word-break: break-all;
        height: 80px;
    }

<input type="text" value="The quick brown fox jumped over the lazy dog" />

স্নিপেট প্রসারিত করুন

কার্যকারণ হিসাবে, এই সমাধানটি কয়েকটি ব্রাউজারে তার কার্যকারিতা হারিয়ে ফেলেছে। দয়া করে ডেমোটি পরীক্ষা করুন: http://cssdesk.com/dbCSQ

Question 4

আপনি এর জন্য ইনপুট ব্যবহার করতে পারবেন না , পরিবর্তে আপনার টেক্সারিয়া ব্যবহার করা দরকার। wrap="soft"কোড সহ টেক্সটরিয়া ব্যবহার করুন এবং এই জাতীয় বৈশিষ্ট্যগুলির মতো alচ্ছিক :

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

বৈশিষ্ট্য: উদাহরণস্বরূপ "40" অক্ষরগুলির মধ্যে পাঠ্যের পরিমাণ সীমাবদ্ধ করতে আপনি maxlength="40"এই জাতীয় বৈশিষ্ট্যটি যুক্ত করতে পারেন : এর <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea> জন্য শৈলীতে স্ক্রোলটি আড়াল করতে। আপনি শুধুমাত্র ব্যবহার overflow:scroll;বা overflow:hidden;বা overflow:auto;এতে কেবলমাত্র একটি স্ক্রল বার জন্য প্রভাবিত নিতে হবে। আপনি যদি প্রতিটি স্ক্রোল বারের জন্য আলাদা আলাদা অ্যাট্রিবিউট চান overflow:scroll; overflow-x:auto; overflow-y:hidden;তবে স্টাইল এরিয়াতে এই জাতীয় বৈশিষ্ট্যগুলি ব্যবহার করুন : পাঠ্যকে পুনরায় আকার পরিবর্তনযোগ্য না করতে আপনি resize:none;এই জাতীয় শৈলীটি ব্যবহার করতে পারেন :

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

এইভাবে আপনার কাছে 14 টি সারি এবং 10 টি কোল সহ শব্দ মোড়ানো এবং "40" অক্ষরের সর্বাধিক অক্ষরের দৈর্ঘ্য যে কোনও ইনপুট পাঠ্য বাক্সের মতো কাজ করে তবে সারিগুলির সাথে পরিবর্তে এবং ইনপুট পাঠ্য ব্যবহার না করে একটি টেক্সেরিয়া থাকতে পারে example

উল্লেখ্য: ইনপুট মত অসদৃশ সারি দিয়ে পাঠ্য এলাকা কাজ <input type="text" name="tbox" size="10"></input>যে তৈরি করা হয় না এ সব সারি সঙ্গে কাজ করে।

Question 5

একটি পাঠ্য ইনপুট যা ফণা অধীন মান একটি একক লাইন স্ট্রিং কিন্তু একটি শব্দ-আবৃত বিন্যাসে ব্যবহারকারী আপনি ব্যবহার করতে পারেন উপস্থাপিত করা হয় তৈরি করতে contenteditable একটি উপর অ্যাট্রিবিউট <div>বা অন্যান্য উপাদান:

const el = document.querySelector('div[contenteditable]');

// Get value from element on input events
el.addEventListener('input', () => console.log(el.textContent));

// Set some value
el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'

div[contenteditable] {
  border: 1px solid black;
  width: 200px;
}

<div contenteditable></div>

স্নিপেট প্রসারিত করুন