কোনও পাঠের অস্বাভাবিক আকার?

Question

সাধারণত টেক্সারিয়াস আয়তক্ষেত্রাকার বা বর্গক্ষেত্র হয়:

তবে আমি একটি কাস্টম-আকারের টেক্সারিয়া চাই, উদাহরণস্বরূপ:

এটা কিভাবে সম্ভব?

Comments

পরের তিন বছরের জন্য অতিমাত্রায় ব্যবহৃত ওয়েব ট্রপটিতে আপনাকে স্বাগতম!

— l0b0

সম্পূর্ণরূপে সম্পর্কিত নয়: আপনি কি প্রসঙ্গে এটি ব্যবহার করার পরিকল্পনা করছেন তা জানতে পারি? আমি বোঝাতে চাইছি, আমি সত্যিই এমন দৃশ্যধারণ করতে পারি না যাতে এটি কার্যকর হবে, সুতরাং আমি তার সম্পর্কে কিছুটা অনুপ্রেরণা চাই।

— ব্যবহারকারী 98085

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

— Synetech

প্রকৃতপক্ষে এটিকে "সমস্যার সমাধানের ন্যূনতম উপলব্ধি প্রদর্শনের" হিসাবে বন্ধ করা উচিত

— মিঃ এলিয়েন

সুতরাং, আপনি উল্লম্ব স্ক্রোলবারটি কোথায় দেখতে চান?

— রব ডব্লু

Answer 1

ভূমিকা

প্রথমত, অন্যান্য পদগুলিতে প্রস্তাবিত অনেকগুলি সমাধান রয়েছে। আমি মনে করি এটি বর্তমানে (২০১৩ সালে) এক যা সবচেয়ে বড় সংখ্যক ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ হতে পারে, কারণ এটির জন্য কোনও CSS3 বৈশিষ্ট্যের প্রয়োজন নেই। তবে, পদ্ধতিটি ব্রাউজারগুলিতে কাজ করবে না যা সমর্থন করে নাcontentdeditable , সাবধান হন।

একটি ডিভ সঙ্গে সমাধান contenteditable

@ গেটজ দ্বারা প্রস্তাবিত হিসাবে , আপনি একটি ডিভ ব্যবহার করতে পারেন contenteditableএবং তারপরে এটিতে কিছু ডিভ দিয়ে আকার তৈরি করতে পারেন। এখানে দুটি ব্লক রয়েছে যা মূল ডিভের উপরের বাম এবং উপরের ডানদিকে ভেসে বেড়াচ্ছে:

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

এর পরে, আপনি জাভাস্ক্রিপ্টের মাধ্যমে সামগ্রীটি পেতে পারেন, উদাহরণস্বরূপ " জমা দিন " বোতামটি ট্রিগার করা হলে। এবং আমার মনে হয় আরো সিএসএস (বাকি সব ব্যবস্থা করতে সক্ষম font-size, colorইত্যাদি) :)

সম্পূর্ণ কোড নমুনা

.block_left {
  background-color: red;
  height: 70px;
  width: 100px;
  float: left;
  border-right: 2px solid blue;
  border-bottom: 2px solid blue;
}

.block_right {
  background-color: red;
  height: 70px;
  width: 100px;
  float: right;
  border-left: 2px solid blue;
  border-bottom: 2px solid blue;
}

.div2 {
  background-color: white;
  font-size: 1.5em;
  border: 2px solid blue;
}

.parent {
  height: 300px;
  width: 500px;
}

<div class="parent">
  <div class="block_left"></div>
  <div class="block_right"></div>
  <div class="div2" contenteditable="true">
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut..."
  </div>
</div>

Comments

কিন্তু একটি বাগ সঙ্গে গ্রেট সমাধান: You can't apply a border color for the editable section keeping the two corner div's background-color:white। তাই না? তবুও এই জিতবে। +1

— রাজেশ পল

সমস্যা দেখছি না। এটি একটি পটভূমি রঙ সেট করা সম্ভব: সাদা এটি: jsfiddle.net/qgfP6/6 । তবে, আপনাকে একটি ব্যাকগ্রাউন্ড সেট করতে হবে, অন্যথায় খারাপ জিনিসগুলি ঘটেছে: jsfiddle.net/qgfP6/7 (আপনি প্যারেন্ট পাত্রে সীমানা দেখতে পারেন ...)

— ম্যাক্সিমাম লোরেন্ট

যদিও আরও একটি ডিভাইসের প্রয়োজন রয়েছে এমন একটি কর্মক্ষেত্র রয়েছে। পারেন্ট উপাদানটি স্বচ্ছ এবং সীমান্ত ছাড়াই সীমানা এবং ব্যাকগ্রাউন্ডের সাথে ওভারড্যাপিং ডিভ দিয়ে ভরা এবং পছন্দসই প্রভাব তৈরি করার জন্য প্যাডিং ডিভ দিয়ে পূর্ণ।

— কিওয়ারটি

@ ম্যাক্সিমালোরান্ট আমি bad thingsকেবল সেগুলি সম্পর্কে বলছিলাম । এগুলি কেবলমাত্র আমি যে পরিস্থিতি সম্পর্কে জিজ্ঞাসা করেছি তার পার্শ্ব-প্রতিক্রিয়াগুলি হবে এবং আপনি কীভাবে বেড়াতে পেরেছেন। তবে এটি অবশ্যই একটি ভাল সমাধান। স্পষ্টির জন্য থ্যাঙ্কস।

— রাজেশ পল

জমকালো উত্তর! এবং এখানে আমি যেতে যাচ্ছি এবং দু'জনের মধ্যে সামগ্রীর বিভাজনের সাথে একসাথে দুটি পাঠ্য অঞ্চল ব্যবহার করার প্রান্তে কিছু প্রস্তাব দেব।

— জারাথুজ্রা

Answer 2

অদূর ভবিষ্যতে আমরা এটি css-shapesঅর্জনের জন্য তথাকথিত ব্যবহার করতে পারি । একত্রিত করে contenteditableবৈশিষ্ট্যের সাথে একটি ডিভ কোনও পাঠ্য অঞ্চলকে কোনও ধরণের আকার তৈরি করতে পারে।truecss-shapes

বর্তমানে ক্রোম ক্যানারি ইতিমধ্যে সমর্থন করে css-shapes । সিএসএস-আকারের সাহায্যে কী সম্ভব তা একটি উদাহরণ:

এখানে তারা পাঠ্য-প্রবাহকে সংজ্ঞায়িত করতে বহুভুজ আকার ব্যবহার করছে। আপনার টেক্সেরিয়ার জন্য যে আকারটি চান তা মেলাতে দুটি বহুভুজ তৈরি করা সম্ভব উচিত।

সম্পর্কে আরও তথ্য css-shapesলিখিত হয়েছে: http://sarasoueidan.com/blog/css-shapes/

ক্রোম ক্যানারিতে CSS-আকার সক্ষম করতে:

1. ক্রোমটি অনুলিপি করুন এবং আটকান: // পতাকাগুলি / # সক্ষম-পরীক্ষামূলক-ওয়েব-প্ল্যাটফর্ম-বৈশিষ্ট্যগুলি অ্যাড্রেস বারে দিন, তারপরে এন্টার টিপুন।
2. এই বিভাগের মধ্যে 'সক্ষম করুন' লিঙ্কটি ক্লিক করুন।

3. ব্রাউজার উইন্ডোর নীচে 'পুনরায় চালু করুন' বোতামটি ক্লিক করুন।

   থেকে: http://html.adobe.com/webplatform/enable/

.container {
  overflow: hidden;
  shape-inside: polygon(200.67px 198.00px, 35.33px 198.47px, 34.67px 362.47px, 537.00px 362.74px, 535.67px 196.87px, 388.33px 197.00px, 386.67px 53.53px, 201.33px 53.53px);
  font-size: 0.8em;
}
/** for red border **/

.container:before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 190px;
  height: 190px;
  background-color: white;
  border-right: 1px solid red;
  border-bottom: 1px solid red;
}
.container:after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 190px;
  height: 190px;
  background-color: white;
  border-left: 1px solid red;
  border-bottom: 1px solid red;
}

<div class="container" contenteditable="true">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis diam lacus, id lacinia quam interdum quis. Ut vitae dignissim lorem, nec lobortis turpis. Fusce non fringilla nulla, eu blandit urna. Nulla facilisi. Nunc tristique, mauris vitae
  tincidunt egestas, eros metus dapibus sapien, quis tincidunt sem dui ac purus. Morbi lobortis, quam sit amet consequat aliquam, elit mi rutrum erat, id tempus turpis turpis et sem. Vivamus tempor mollis porttitor. Sed elementum nisl sit amet sapien
  auctor imperdiet. Sed suscipit convallis nisi, in dignissim risus placerat suscipit. Sed vel lorem eu massa vulputate pretium. Nulla eget dolor sed elit gravida condimentum non vel lorem. Vivamus pretium, augue sed aliquet ultricies, neque nibh porttitor
  libero, a tristique elit mi eu nibh. Vestibulum erat arcu, condimentum eleifend adipiscing ut, euismod eu libero. In pharetra iaculis lorem, at consectetur nisi faucibus eu.

</div>

বহুভুজটি তৈরি করেছে: http://betravis.github.io/shape-tools/polygon-drawing/

ফলাফল

http://jsfiddle.net/A8cPj/1/

Comments

ফিডল এবং উদাহরণ আমার পক্ষে কার্যকর হয়নি। পাঠ্যটি বহুভুজের নীচে যায় এবং এর নীচে লুকানো থাকে। আমি ক্রোমিয়াম 49, ফায়ারফক্স 44

— deathangel908

সবেমাত্র এটি দেখা গেছে, এটি প্রতিক্রিয়াশীল হওয়ার জন্য এটি একটি দুঃস্বপ্ন হবে।

— দামিয়ানো সেলেন্ট

Answer 3

বিষয়বস্তু সম্পাদনাযোগ্য দ্বারা এটি সম্ভব ?

এটি কোনও টেক্সেরিয়া নয়, তবে আপনি যদি এই আকারের সাথে একটি ডিভি তৈরি করতে সফল হন তবে এটি কার্যকর হতে পারে।

আমি মনে করি কেবল টেক্সারিয়া দিয়ে এটি সম্ভব নয় ...

সামান্য উদাহরণ: http://jsfiddle.net/qgfP6/5/

<div contenteditable="true">
</div>

Answer 4

আপনি দুটি কোণার ডিভ দিয়ে একটি সন্তোষজনক ডিভ নিয়ে কাজ করতে পারেন:

<div style="border:1px blue solid ; width: 200px; height: 200px;" contenteditable="true">
  <div style="float:left; width:50px; height: 50px; border: 1px solid blue" contenteditable="false"></div>
  <div style="float:right; width:50px; height: 50px;  border: 1px solid blue" contenteditable="false"></div>
  hello world, hello worldsdf asdf asdf sdf asdf asdf
</div>

Comments

সমস্ত বিভিন্ন ব্যবহারের ক্ষেত্রে যত্ন নিতে আরও কিছু জেএস কাজের প্রয়োজন needs তবে ভিত্তি আছে।

— গিডন

Answer 5

আপনি সিএসএস অঞ্চলগুলির সাথে এটিও করতে পারেন

অঞ্চলগুলির সাথে, আপনি পৃষ্ঠাগুলির অবস্থান নির্বিশেষে আপনার বেছে নেওয়া কোনও ধারক আদেশ নির্দিষ্ট করে, বিদ্যমান স্টাইলযুক্ত ধারকগুলিতে সামগ্রী প্রবাহিত করতে CSS বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন।

(ওয়েব প্ল্যাটফর্ম)

[বর্তমানে ওয়েবকিট নাইটলি, সাফারি 6.1+ এবং আইওএস 7 তে সমর্থিত এবং পতাকাটি সক্ষম করার পরে ক্রোম এবং অপেরাতে ইতিমধ্যে ব্যবহারযোগ্য: পরীক্ষামূলক-ওয়েব-প্ল্যাটফর্ম-বৈশিষ্ট্যগুলি সক্ষম করুন - ক্যানিউজ , ওয়েব প্ল্যাটফর্ম ]

বেহালা

সুতরাং আপনি 2 টি অঞ্চল জুড়ে পাঠ্য প্রবাহিত করে সেই টেক্সারিয়া আকার তৈরি করতে এবং সামগ্রীতে বিতর্কযোগ্য যুক্ত করে সম্পাদনা করতে পারেন।

মার্কআপ

<div id="box-a" class="region"></div>
<div id="box-b" class="region"></div>
<div id="content" contenteditable>text here</div>

(প্রাসঙ্গিক) সিএসএস

#content {
     -ms-flow-into: article;
    -webkit-flow-into: article;
}

.region {
    -ms-flow-from: article;
    -webkit-flow-from: article;
    box-sizing: border-box;
    position: absolute;
    width: 200px;
    height: 200px;
    padding: 0 1px;
    margin: auto;
    left:0;right:0;
    border: 2px solid lightBlue;
}

#box-a {
    top: 10px;
    background: #fff;
    z-index: 1;
    border-bottom: none;
}

#box-b {
    top: 210px;
    width: 400px;
    overflow: auto;
    margin-top: -2px;
}

ফলাফল:

অঞ্চলগুলি সম্পর্কে আরও তথ্যের জন্য - এখানে একটি ভাল অ্যারিকল: CSS3 অঞ্চল: এইচটিএমএল এবং CSS3 সহ সমৃদ্ধ পৃষ্ঠা বিন্যাস

Comments

নিস! যদিও এটি সবেমাত্র সমর্থিত (বেশিরভাগ ব্যবহারকারী ক্রোম ক্যানারি পেতে এবং কোনও ওয়েবসাইট ব্যবহারের জন্য পরীক্ষামূলক পতাকাগুলি সক্ষম করতে চায় না), অবশ্যই এটি "করা উচিত"

— মার্কাসফল্টওয়্যার

প্রকৃতপক্ষে ... Unfortunetly, তারা এখনো ফায়ারফক্স (এমনকি আলফা দিকে) এবং অন্যদের কাজ করে না এবং বিক্রেতা উপসর্গ একটি খারাপ গন্ধ আছে :( কিন্তু পদ্ধতি আকর্ষণীয় এবং কয়েক মাসের / বছরের মধ্যে ব্যবহার করা হয়েছে।

— ম্যাক্সিম Lorant

সিএসএস অঞ্চল, সিএসএস আকার, সিএসএস ফিল্টার ... সেখানে আর কী আছে ik

— মুহাম্মদ উমার

@ মুহাম্মাদ উমর ... সিএসএস

— ব্যাতিক্রম

Answer 6

বাক্সে পাঠ্যের একটি দীর্ঘ রেখাটি কার্সারটিকে মাঝের প্রান্তগুলি দিয়ে নামিয়ে দেবে এবং আমি এটি ঠিক করতে পারি না।

**[Fiddle Diddle][1]**

    #wrap {
        overflow: hidden;
    }
    #inner {
        height: 350px;
        width: 500px;
        border: 1px solid blue;
    }
    #textContent {
        word-wrap: break-word;
        word-break: break-all;
        white-space: pre-line;
    }
    #left, #right {
        height: 50%;
        width: 25%;
        margin-top: -1px;
        padding: 0;
        border: 1px solid blue;
        border-top-color: white;
        margin-bottom: 5px;
    }
    #right {
        margin-left: 5px;
        float: right;
        margin-right: -1px;
        border-right-color: white;
    }
    #left {
        margin-right: 5px;
        float: left;
        margin-left: -1px;
        border-left-color: white;
    }

<div id="wrap">
  <div id="inner">
     <div id="left"></div>
     <div id="right"></div>
     <span id="textContent" contenteditable>The A B Cs</span>
  </div>
</div>

[1]: http://jsfiddle.net/yKSZV/

Answer 7

এটা সম্ভব না স্যার! একটি টেক্সেরিয়া সাধারণত একটি আয়তাকার বা বর্গক্ষেত্র বাক্স, যেখানে আপনি টাইপ করতে পারেন।

তবে এর মতো কিছু তৈরি করতে আপনি 2 টি টেক্সারি ব্যবহার করতে পারেন এবং তারপরে তাদের নির্দিষ্ট প্রস্থ এবং উচ্চতা দিতে পারেন। নাহলে আমি মনে করি না এটি ঘটবে!

দ্বিতীয় পদ্ধতিটি হ'ল সম্পাদনযোগ্য উপাদান তৈরি করা।

http://jsfiddle.net/afzaal_ahmad_zeeshan/at2ke/

কোডটি হ'ল:

<div contenteditable="true">
   This text can be edited by the user.
</div>

এটি ব্যবহার করে, আপনি যে কোনও উপাদান সম্পাদনযোগ্য করতে পারেন! আপনি এটিতে মাত্রা দিতে পারেন, এবং এটি কার্যকর হবে! আপনি এটি একটি টেক্সটরিয়া হিসাবে পাবেন।

তথ্যসূত্র: https://dePLer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Edable

Comments

না তুমি ভুল করছ. এমনকি তিনি divটেক্সারিয়ার পরিবর্তে এস ব্যবহার করেছেন। কারণ টেক্সারিয়াকে আকারে রূপান্তর করা যায় না! :) @ মারকাসফটওয়্যার সুতরাং আপনি এই উত্তরটি ডাউনভোট করার সময় ভুল! .. যেহেতু এটি তার মত একই উত্তর। এখানে উপস্থিত না থাকা কেবলমাত্র সেই চিত্রটি এবং সেই আকারের সাথে সম্পাদনাযোগ্য ডিভ তৈরির কোড!

— আফজাল আহমদ জিশান

কি? ওহ আস ভাই, আপনি যদি বিনা কারণে আমাকে হতাশ রাখতে চান তবে আপনাকে স্বাগতম! আমার উত্তর পোস্ট করা হয়েছিল: 9:58 সে উত্তরটি 10:10 এ পোস্ট করেছে: / আমি এই প্রশ্নের উত্তরটি প্রথম দিয়েছিলাম .. @ মার্কাসফটওয়্যার আপনি নিজের জন্য সময় দেখতে পারেন। আমি কোড সরবরাহ না করায় আমি বেশি উত্সাহিত হই না। যাইহোক, আমি শীর্ষ 3 জন উত্তরদাতাদের উত্তর পোস্ট করেছি ..

— আফজাল আহমেদ জিশান

লল আসলে যখন আমি "

— প্রবীণ

এর কারণেই এটি খুব বেশি উত্সাহিত হয় না! আমি এখানে সর্বদা সক্রিয়, তাই আমি কীভাবে ইদানীং পোস্ট করতে পারি? এবং এই এক একটি সহজ উত্তর ছিল। তাহলে আপনি কি দয়া করে ডাউনটোটটি সরিয়ে ফেলতে পারেন? :)

— আফজাল আহমদ জিশান

Answer 8

আপনি একত্রিত তাহলে সিএসএস আকার সঙ্গে contenteditableএই WebKit ব্রাউজারে করা যাবে।

প্রথমে আপনাকে পতাকাটি সক্ষম করতে হবে: পরীক্ষামূলক-ওয়েব-প্ল্যাটফর্ম-বৈশিষ্ট্যগুলি সক্ষম করুন

তারপরে আপনার ওয়েবকিট ব্রাউজারটি পুনরায় চালু করুন এবং তারপরে এই ছোট্ট চেকটি পরীক্ষা করুন !

এই পদ্ধতিটি অ-মানক আকারগুলির জন্যও কাজ করবে।

মার্কআপ

 <div class="shape" contenteditable="true">
    <p>
     Text here
    </p>
  </div>

সিএসএস

.shape{
  -webkit-shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
  shape-inside: polygon(71.67px 204.00px,75.33px 316.47px,323.67px 315.47px,321.17px 196.00px,245.96px 197.88px,244.75px 87.76px,132.33px 87.53px,132.50px 202.26px);
  width: 400px;
  height: 400px;
  text-align: justify;
  margin: 0 auto;
}

তাহলে পৃথিবীতে কীভাবে আমি সেই বহুভুজ আকৃতি পেলাম?

এই সাইটে যান এবং আপনার নিজস্ব কাস্টম আকৃতি তৈরি করুন!

পতাকা সক্ষম করার বিষয়ে নোট: (থেকে এখানে )

আকার, অঞ্চল এবং মিশ্রণ মোড সক্ষম করতে:

ক্রোমটি অনুলিপি করুন এবং আটকান: // পতাকাগুলি / # সক্ষম-পরীক্ষামূলক-ওয়েব-প্ল্যাটফর্ম-বৈশিষ্ট্যগুলি অ্যাড্রেস বারে দিন, তারপরে এন্টার টিপুন। এই বিভাগের মধ্যে 'সক্ষম করুন' লিঙ্কটি ক্লিক করুন। ব্রাউজার উইন্ডোর নীচে 'পুনরায় চালু করুন' বোতামটি ক্লিক করুন।

Comments

একটি (ভাল নথিভুক্ত, কাঠামোগত) সমাধানের জন্য +1, মানক কিনা।

— রলফ্ল

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

— মিলিমুজ

Answer 9

জটিল আকার তৈরির জন্য আপনি গুগল ওয়েব ডিজাইনার সরঞ্জামটি ব্যবহার করতে পারেন HTML5-canvas and CSS।

আরও বেশি আপনি এই আকারগুলির অভ্যন্তরে পাঠ্য প্রবেশ করানোর জন্য টাইপিংয়ের মতো সরঞ্জামগুলি পাবেন।

যেহেতু আউটপুট ফাইলে অনেকগুলি কোড থাকে, গুগল ওয়েব ডিজাইনার সরঞ্জাম ব্যবহার করে তৈরি করা একটি নমুনা ডেমোর একটি মূর্ছা সরবরাহ করে

ছোট্ট ডেমো >>

Comments

— ক্রিম

@ ইলমারিকারোনেন = পাঠ্য সম্পাদনাযোগ্য নয় ??? সত্যিই আমি পেলাম না এটিকে সম্পাদনযোগ্য করে তোলার দরকার কী ??

— প্রশান্ত কেসি

প্রশ্নটি <textarea>(যেমন সম্পাদনযোগ্য পাঠ্যের বাক্স) এর মতো কিছু জিজ্ঞাসা করে , তবে একটি আয়তক্ষেত্রাকার আকৃতি সহ। "সম্পাদনযোগ্য" অংশটি ছাড়াই এখানে খুব সামান্য চ্যালেঞ্জ রয়েছে - এইচটিএমএল ২.০ এ ভাসমান চিত্রের প্রবর্তনকাল থেকেই মানুষ এইচটিএমএলে প্রবাহিত পাঠ্য করে চলেছে।

— ইলমারি করোনেন

ফিডল সামগ্রী সম্পাদনাযোগ্য সম্পত্তি সহ আপডেট হয়েছে। এখন ধারক ভিতরে পাঠ্য সম্পাদনাযোগ্য।

— প্রশান্ত কেসি

ডেমোতে, আমি 1 টি সম্পূর্ণ পাঠ্য নয়, 2 টি ভিন্ন পাঠ্য সম্পাদনা করতে পারি। ক্রোমে 31.

— নিকোলাস বারবুলেসকো

Answer 10

যদি, যে কারণেই হোক না কেন, আপনার যদি সত্যিই ব্রাউজারগুলির সমর্থন না করা হয় তবে contenteditableআপনি সম্ভবত জাভাস্ক্রিপ্টে ইভেন্টগুলি ব্যবহার করে একই কাজটি করতে পারেন, যদিও এটি একটি খুব অগোছালো কাজ নয়।

সুডোকোড:

focused=false;
when user clicks the div
    {
    focused=true;
    }
when user clicks outside the div
    {
    focused=false;
    }
when user presses a key
    {
    if (focused)
    {
    add character of key to div.innerHTML;
    }
    }