javascript একটি textarea অস্বাভাবিক আকৃতি?



jquery html (10)

সাধারণত টেক্সরেয়ারগুলি আয়তক্ষেত্রাকার বা বর্গক্ষেত্রের মতো:

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

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

https://src-bin.com


Answer #1

ভূমিকা

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

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

@Getz দ্বারা প্রস্তাবিত হিসাবে, আপনি @Getz একটি div ব্যবহার করতে পারেন এবং তারপরে এটিকে কিছু ডিভি দিয়ে আকার দিন। এখানে একটি উদাহরণ রয়েছে, দুটি ব্লক যা উপরের বাম দিকে এবং প্রধান div এর উপরের ডানদিকে ফ্লোট করে:

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

তারপরে, যখন আপনি " জমা দিন " বোতামটি উদাহরণস্বরূপ ট্রিগার করা হয় তখন আপনি জাভাস্ক্রিপ্টের মাধ্যমে সামগ্রীটি পেতে পারেন। এবং আমি মনে করি আপনি বাকি CSS ( 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>


Answer #2

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

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

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

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

FIDDLE

সুতরাং আপনি টেক্সটের আকারটি 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 সহ ধনী পাতা বিন্যাস


Answer #3

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

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

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

FIDDLE ডেমো >>


Answer #4

আপনি দুটি কোণ divs সঙ্গে একটি কন্টেন্টযোগ্য div সঙ্গে কাজ করতে পারে:

<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>

Answer #5

আপনি যদি CSSS আকারগুলি সাবস্ক্রাইবযোগ্য করে একত্রিত করেন তবে এটি ওয়েবকিট ব্রাউজারগুলিতে করা যেতে পারে।

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

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

এই পদ্ধতি পাশাপাশি অ-মানক আকারের জন্য কাজ করবে।

মার্কআপ

 <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;
}

তাহলে পৃথিবীতে কিভাবে আমি বহুভুজ আকৃতি পেয়েছিলাম?

http://betravis.github.io/shape-tools/polygon-drawing/ যান এবং আপনার নিজস্ব কাস্টম আকৃতি!

পতাকা সক্ষম করার বিষয়ে নোট: ( http://html.adobe.com/webplatform/enable/ থেকে)

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

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


Answer #6

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

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

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

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

কোডটি হল:

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

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

রেফারেন্স: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable


Answer #7

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

বর্তমানে Chrome ক্যানারি ইতিমধ্যে css-shapes supports । CSS-shapes দ্বারা কি সম্ভব একটি উদাহরণ হল:

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

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

Chrome ক্যানারিতে CSS-shapes সক্ষম করতে:

  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/


Answer #8

বাক্সে পাঠ্যের একটি লম্বা লাইনটি মাঝের প্রান্তের পূর্বে কার্সারটিকে নীচে ফেলে দেবে এবং আমি এটি ঠিক করতে পারছি না।

**[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 #9

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

pseudocode:

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;
    }
    }

Answer #10

সম্ভবত কন্টেন্ট সম্পাদনাযোগ্য সঙ্গে সম্ভব?

এটি একটি টেক্সটেরিয়া নয়, তবে আপনি যদি এই আকৃতির সাথে একটি div তৈরি করতে সফল হন তবে এটি কাজ করতে পারে।

আমি শুধু textarea সঙ্গে এটা সম্ভব নয় মনে হয় ...

একটু উদাহরণ: http://jsfiddle.net/qgfP6/5/

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




css