আপনি <টেক্সটারে </a> এ মাল্টলাইন HTML5 স্থানধারক পাঠ্য রাখতে পারেন?

Question

আমার কাছে টেক্সটফিল্ডে ভুতের পাঠ্য রয়েছে যা আপনি যখন এইচটিএমএল 5 এর স্থানধারক বৈশিষ্ট্যটি ব্যবহার করে সেগুলিতে ফোকাস করেন তখন অদৃশ্য হয়ে যায়:

<input type="text" name="email" placeholder="Enter email"/>

টেক্সেরিয়াতে মাল্টলাইন প্লেসোল্ডার পাঠ্য রাখতে আমি একই ব্যবস্থাটি ব্যবহার করতে চাই, সম্ভবত এরকম কিছু:

<textarea name="story" placeholder="Enter story\n next line\n more"></textarea>

তবে সেগুলি \nপাঠ্যে প্রদর্শিত হবে এবং নতুন লাইনের কারণ তৈরি করবে না ... কোনও মাল্টলাইন প্লেসোল্ডার থাকার কোনও উপায় আছে কি?

আপডেট : আমি এই কাজটি করার একমাত্র উপায় হল jQuery ওয়াটারমার্ক প্লাগইনটি ব্যবহার করছিলাম, যা স্থানধারক পাঠ্যে এইচটিএমএল গ্রহণ করে:

$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});

Comments

আইই মনে হয় এটি সঠিকভাবে পরিচালনা করছে। ফায়ারফক্স

— ওটিওএইচ

স্ট্যাকওভারফ্লো / প্রশ্নগুলি / 12৩১২6৩৩ / ......... খুব ভাল উত্তর সহ খুব অনুরূপ একটি প্রশ্ন।

— লয়েড ডিওল্ফ

যদি আপনি white-spaceএটির মুখোমুখি হয়ে থাকেন এবং এটি সঠিকভাবে সেট করেছেন তা নিশ্চিত করার জন্য মান চেক সিএসএস সেট করতে

— জেএস ব্যবহার করছেন

এই অন্যান্য প্রশ্ন থেকে: 
সাফারি বাদে সর্বত্র কাজ করে।

— স্পিনএক্সএক্সএক্স

Answer 1

জন্য <textarea>গুলি বৈশিষ্ট বিশেষভাবে রূপরেখা স্থানধারক অ্যাট্রিবিউট যে ঘোড়ার গাড়ি আয় + + লাইন ব্রেক ব্রাউজার দ্বারা linebreaks যেমন অনুষ্ঠিত হতে হবে।

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

এমডিএন এও প্রতিফলিত: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr- placeholder

এফডব্লিউআইডাব্লু, যখন আমি ক্রোম .0৩.০.৩৩৩৯.১৩২ এ চেষ্টা করি তখন এটি যেমনটি বলা উচিত তেমন কাজ করে।

Comments

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

— এক্কিস

Answer 2

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

এই উদাহরণটি সমস্ত মাল্টলাইন টেক্সারিয়ার স্থানধারককে প্রতিস্থাপন করে ।

var textAreas = document.getElementsByTagName('textarea');

Array.prototype.forEach.call(textAreas, function(elem) {
    elem.placeholder = elem.placeholder.replace(/\\n/g, '\n');
});

<textarea class="textAreaMultiline" 
          placeholder="Hello, \nThis is multiline example \n\nHave Fun"
          rows="5" cols="35"></textarea>

_{জেএসফিডাল স্নিপেট।}

প্রত্যাশিত ফলাফল

---

মন্তব্যের ভিত্তিতে মনে হয় কিছু ব্রাউজার এই হ্যাকটিকে গ্রহণ করে এবং অন্যরা তা গ্রহণ করে না।
এই পরীক্ষার আমি দৌড়ে ফলাফল (সাথে আছেন browsertshots এবং browserstack )

• ক্রোম:> = 35.0.1916.69
• ফায়ারফক্স:> = 35.0 (প্ল্যাটফর্মে ফলাফল পরিবর্তিত হয়)
• IE:> = 10
• কেএইচটিএমএল ভিত্তিক ব্রাউজারগুলি: 4.8
• সাফারি: না (পরীক্ষিত = সাফারি 8.0.6 ম্যাক ওএস এক্স 10.8)
• অপেরা: না (পরীক্ষিত <= 15.0.1147.72)

থিসের পরিসংখ্যানগুলির সাথে সংযুক্ত , এর অর্থ এটি বর্তমানে ব্যবহৃত ( প্রায়শ অক্টোবর 2015) ব্যবহৃত ব্রাউজারগুলির প্রায় 88.7% নিয়ে কাজ করে ।

আপডেট : বর্তমানে এটি বর্তমানে ব্যবহৃত (জুলাই 2018) কমপক্ষে 94.4% ব্যবহৃত ব্রাউজারগুলিতে কাজ করে।

Comments

এই জিসফিডাল উদাহরণটি মোটেও কার্যকর হয় না ... এটি কেবলমাত্র বহুবিধ কারণ টেক্সারিয়া আকার।

— sebnukem

একটি টাইপো আছে, তবে আমি সম্পাদনা করতে পারছি না কারণ স্ট্যাক ওভারফ্লো আমাকে এই "সম্পাদনাগুলি কমপক্ষে 6 টি অক্ষর" ত্রুটি হতে হবে give আপনার ক্লাসটি হওয়া উচিত multilineনয়multiligne

— ড্যানিয়েল ল্যারিও

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

— সাইরবিল

মনে হয়

— সাফারিটিতে

@ জারঙ্ক: আমি এটি নিশ্চিত করতে পারি। এটি ক্রোমের কারণে নয় তবে অ্যাপল কোনও ব্রাউজারকে আইওএস ব্যবহার করতে বাধ্য করছে WKWebView। পরবর্তীকালে, আইওএস-এর কোনও ব্রাউজার না করা পর্যন্ত এই হ্যাকটিকে সঠিকভাবে রেন্ডার করবে না WKWebView।

— সাইরবিল

Answer 3

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

<textarea name="address" placeholder="1313 Mockingbird Ln         Saginaw, MI 45100"></textarea>

Comments

হ্যাঁ মাল্টলাইন স্থানধারকগুলি ক্রসব্রোজার সমর্থিত নয়, সর্বশেষতম সাফারিটি সমর্থন করে তবে এটি আইওএস 5 এ অবশ্যই সমর্থিত নয়

— টম

আইই বা ফায়ারফক্স উইন্ডোজের ক্ষেত্রে এটি আমার পক্ষে কাজ করে না। এটি কেবল যে জায়গাগুলির জন্য আমি জিজ্ঞাসা করেছি সেগুলি সন্নিবেশ করায়

— এক্কিস

ক্রোম 37 নতুন পাঠ্য লাইনগুলি না ছড়িয়ে একটি টেক্সেরিয়ায় স্থানধারক পাঠ্য প্রদর্শন করছে। 'ফিচার' এর নামটি কী এমন কেউ জানে যাতে আমি ক) এটির জন্য অনুসন্ধান করতে পারি এবং খ) এর জন্য পরীক্ষা করতে পারি?

— বেন

Answer 4

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

---

প্রথমে যথারীতি এইচটিএমএল 5 তে আপনার স্থানধারকের প্রথম লাইন যুক্ত করুন

<textarea id="text1" placeholder="Line 1" rows="10"></textarea>

তারপরে সিএসএস দ্বারা বাকী রেখাটি যুক্ত করুন:

#text1::-webkit-input-placeholder::after {
    display:block;
    content:"Line 2\A Line 3";
}

---

আপনি যদি এক জায়গায় আপনার লাইনগুলি রাখতে চান তবে আপনি নিম্নলিখিতগুলি চেষ্টা করতে পারেন। এর খারাপ দিকটি হ'ল ক্রোম, সাফারি, ওয়েবকিট-ইত্যাদি বাদে অন্যান্য ব্রাউজারগুলি। এমনকি প্রথম লাইনটি দেখাও না:

<textarea id="text2" placeholder="." rows="10"></textarea>​

তারপরে সিএসএস দ্বারা বাকী রেখাটি যুক্ত করুন:

#text2::-webkit-input-placeholder{
    color:transparent;
}

#text2::-webkit-input-placeholder::before {
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";
}

---

ডেমো ফিডল

এটি খুব দুর্দান্ত হবে, যদি ফায়ারফক্সে কাজ করে এমন একটি ডেমো পাওয়া যায় could

Comments

ফিডল লিঙ্ক সরবরাহ করার জন্য ধন্যবাদ। এটি বিভিন্ন ব্রাউজারে আচরণ যাচাই করা সহজ করে তোলে। আইই 10 তে উভয় সংস্করণ ব্যর্থ হয়, পাশাপাশি এফএফ 12 (উইন্ডোজ) এ। দু: খের বিষয় যে. সাফারি 6.1 কাজ করে :(

— এক্কিস

Chrome এ আর কাজ করে না - এখন অনেক দিন ধরে, আমি ধরে নিই।

— মাইক রোকট

Answer 5

আপনি যদি কৌনিক জেএস ব্যবহার করে থাকেন তবে আপনি এতে যা চান তা কেবল রাখার জন্য ব্রেস ব্যবহার করতে পারেন: এখানে একটি ফ্রিডল।

<textarea rows="6" cols="45" placeholder="{{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea>

Comments

আমি অনুরূপ পদ্ধতির ব্যবহার করছি কিন্তু এটা সাফারি এবং Firefox এ কাজ করছে না

— স্ট্যান

Answer 6

এমডিএন অনুসারে ,

ইঙ্গিতটি রেন্ডার করার সময় স্থানধারক পাঠ্যের মধ্যে ক্যারিজের রিটার্ন বা লাইন-ফিডগুলি লাইন ব্রেক হিসাবে গণ্য করতে হবে।

এর অর্থ হল যে আপনি যদি কেবল একটি নতুন লাইনে ঝাঁপ দেন তবে এটি সঠিকভাবে উপস্থাপন করা উচিত। অর্থাত

<textarea placeholder="The car horn plays La Cucaracha.
You can choose your own color as long as it's black.
The GPS has the voice of Darth Vader.
"></textarea> 

এই মত রেন্ডার করা উচিত:

Answer 7

HTML5 বৈশিষ্ট স্পষ্টভাবে জায়গা ধারক মাঠে নতুন লাইন প্রত্যাখ্যান করে। স্থানধারকরে লাইন ফিড সহ যখন উপস্থাপন করা হয় তখন ওয়েবকিট / উইল / নতুন লাইনগুলি সন্নিবেশ করানো যায় তবে এটি ভুল আচরণ এবং এর উপর নির্ভর করা উচিত নয়।

অনুমান যে অনুচ্ছেদগুলি w3 এর পক্ষে যথেষ্ট সংক্ষিপ্ত নয়;)

Comments

ওয়েবকিটের আচরণ ভুল নয় কারণ স্পেসিফিকেশনটি সিআর / এলএফ উপস্থিত থাকলে কী ঘটবে তা বলে না does

— খ্রিস্টান

@ ক্রিশ্চিয়ান এটি এখন করেছে, এটি বলছে "ব্যবহারকারী এজেন্টদের লাইন বিরতি থাকার পরে এটি ব্যবহারকারীর কাছে এই ইঙ্গিতটি উপস্থাপন করা উচিত ..."। এটি স্ট্রিপিং লাইন বিরতি সম্পর্কে এটি বলে: "যখন কোনও ব্যবহারকারী এজেন্ট একটি স্ট্রিং থেকে লাইন বিভক্ত করতে হয়, তখন ব্যবহারকারী এজেন্টকে অবশ্যই সেই স্ট্রিং থেকে যে কোনও" এলএফ "(ইউ + 000 এ) এবং" সিআর "(ইউ + 000 ডি) অক্ষর সরিয়ে ফেলতে হবে। "।

— রিচার্ড টার্নার

এই উত্তরটি আর সত্য নয়। বৈশিষ্ট এখন স্পষ্টভাবে প্রয়োজন যে স্থানধারক মধ্যে linebreaks linebreaks যেমন রেন্ডার করা।

— ক্লোনকেক্স

Answer 8

প্রতিক্রিয়া:

আপনি যদি প্রতিক্রিয়া ব্যবহার করে থাকেন তবে আপনি এটি নিম্নলিখিত হিসাবে করতে পারেন:

placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}

Answer 9

আপনার textareaযদি স্থির প্রস্থ থাকে তবে আপনি নন-ব্রেকিং স্পেস এবং স্বয়ংক্রিয় পাঠ্য মোড়কের সংমিশ্রণটি ব্যবহার করতে পারেন। প্রতিটি লাইনের জন্য কেবল এনএসপিতে স্পেসগুলি প্রতিস্থাপন করুন এবং এটি নিশ্চিত করুন যে দুটি প্রতিবেশী রেখা একটির সাথে খাপ খায় না। বাস্তবে line length > cols/2।

এটি সর্বোত্তম উপায় নয়, তবে এটি একমাত্র ক্রস-ব্রাউজার সমাধান হতে পারে।

<textarea class="textAreaMultiligne" 
          placeholder="Hello,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This&nbsp;is&nbsp;multiligne&nbsp;example Have&nbsp;Fun&nbsp;&nbsp;&nbsp;&nbsp;"
          rows="5" cols="35"></textarea>

Answer 10

আপনি সিএসএস ব্যবহার করে চেষ্টা করতে পারেন, এটি আমার পক্ষে কাজ করে। বৈশিষ্ট্যটি placeholder=" "এখানে প্রয়োজনীয়।

<textarea id="myID" placeholder=" "></textarea>
<style>
#myID::-webkit-input-placeholder::before {
    content: "1st line...\A2nd line...\A3rd line...";
}
</style>

Answer 11

পিএইচপি ইন ক্রিয়াকলাপের সাথে (13):

echo '<textarea class="form-control" rows="5" style="width:100%;" name="responsable" placeholder="NOM prénom du responsable légal'.chr(13).'Adresse'.chr(13).'CP VILLE'.chr(13).'Téléphone'.chr(13).'Adresse de messagerie" id="responsable"></textarea>';

Answer 12

আমি এইচটিএমএল / সিএসএস দিয়েই সম্ভব বলে মনে করি না। জাভাস্ক্রিপ্ট বা অন্য কোনও ধরণের হ্যাক ব্যবহার করে সম্ভব হতে পারে - পাঠ্যটিকে পরবর্তী লাইনে ঠেলে দেওয়ার জন্য অতিরিক্ত স্থান etc.

Answer 13

বুটস্ট্র্যাপ + কনটেনটেটেবল + মাল্টলাইন প্লেসোল্ডার

ডেমো: https://jsfiddle.net/39mptojs/4/

@ সাইরবিল এবং @ ডানিয়েল উত্তরের উপর ভিত্তি করে

কনস্টেটেটেবলযোগ্য স্থানধারক সক্ষম করতে বুটস্ট্র্যাপ, jQuery এবং https://github.com/gr2m/bootstrap-expandable-input ব্যবহার করুন ।

জাভাস্ক্রিপ্ট "স্থানধারক প্রতিস্থাপন" ব্যবহার করে এবং সিএসএসে "সাদা-স্থান: প্রাক" যুক্ত করে একাধিক স্থানধারক দেখানো হয়েছে is

এইচটিএমএল:

<div class="form-group">
    <label for="exampleContenteditable">Example contenteditable</label>
    <div id="exampleContenteditable" contenteditable="true" placeholder="test\nmultiple line\nhere\n\nTested on Windows in Chrome 41, Firefox 36, IE 11, Safari 5.1.7 ...\nCredits StackOveflow: .placeholder.replace() trick, white-space:pre" class="form-control">
    </div>
</div>

javascript:

$(document).ready(function() {
    $('div[contenteditable="true"]').each(function() {
        var s=$(this).attr('placeholder');
        if (s) {
            var s1=s.replace(/\\n/g, String.fromCharCode(10));
            $(this).attr('placeholder',s1);
        }
    });
});

CSS:

.form-control[contenteditable="true"] {
    border:1px solid rgb(238, 238, 238);
    padding:3px 3px 3px 3px;
    white-space: pre !important;
    height:auto !important;
    min-height:38px;
}
.form-control[contenteditable="true"]:focus {
    border-color:#66afe9;
}

Answer 14

মূল পোস্টে ওয়াটারমার্ক সমাধান দুর্দান্ত কাজ করে। এর জন্য ধন্যবাদ যদি কারও এটির প্রয়োজন হয় তবে এটির জন্য এখানে একটি কৌনিক নির্দেশ রয়েছে।

(function () {
  'use strict';

  angular.module('app')
    .directive('placeholder', function () {
      return {
        restrict: 'A',
        link:     function (scope, element, attributes) {
          if (element.prop('nodeName') === 'TEXTAREA') {
            var placeholderText = attributes.placeholder.trim();

            if (placeholderText.length) {
              // support for both '\n' symbol and an actual newline in the placeholder element
              var placeholderLines = Array.prototype.concat
                .apply([], placeholderText.split('\n').map(line => line.split('\\n')))
                .map(line => line.trim());

              if (placeholderLines.length > 1) {
                element.watermark(placeholderLines.join('<br>\n'));
              }
            }
          }
        }
      };
    });
}());