एक textarea के असामान्य आकार?

Question

आम तौर पर textareas आयताकार या चौकोर होते हैं, जैसे:

लेकिन मैं उदाहरण के लिए, एक कस्टम-आकार का टेक्स्टारिया चाहता हूं:

यह कैसे हो सकता है?

Comments

अगले तीन वर्षों के लिए सबसे अधिक उपयोग की जाने वाली वेब ट्रोप में आपका स्वागत है!

— l0b0

पूरी तरह से असंबंधित: क्या आप पूछ सकते हैं कि आप किस संदर्भ में इसका उपयोग करने की योजना बना रहे हैं? मेरा मतलब है, मैं वास्तव में एक परिदृश्य का पता नहीं लगा सकता जिसमें यह उपयोगी होगा, इसलिए मैं उस पर कुछ प्रेरणा चाहता हूं।

— user98085

हर कोई एक महत्वपूर्ण समस्या याद आ रही है । <div>टेक्स्ट को स्टोर करने के लिए उपयोग करना एक अच्छा उपाय नहीं है। यह डिजाइन में मदद कर सकता है, और केवल पढ़ने के लिए भी स्वीकार्य हो सकता है पाठ (जो पूरी तरह से उद्देश्य को हरा देता है contenteditable), लेकिन यह उपयोगकर्ता से पाठ इनपुट के लिए अच्छा नहीं है । एक div (यहां तक ​​कि एक संतोषप्रद एक) एक सामान्य इनपुट तत्व की तरह एक मानक इनपुट तत्व नहीं है, इसलिए, इसे एक की तरह नहीं माना जाएगा, और इसलिए क्रैश होने की स्थिति में इसकी सामग्री को ब्राउज़र द्वारा सहेजा नहीं जाएगा। Div का उपयोग करने से डेटा-हानि होती है । इस उदाहरण को देखें ।

— सिनटेक

वास्तव में इसे बंद किया जाना चाहिए क्योंकि "समस्या का एक न्यूनतम समझ को हल किया जा रहा है"

— श्री एलियन

तो, आप ऊर्ध्वाधर स्क्रॉलबार कहाँ देखना चाहते हैं?

— रोब डब्ल्यू

Answer 1

परिचय

पहले, कई समाधान हैं, अन्य पदों में प्रस्तावित हैं। मुझे लगता है कि यह वर्तमान में (2013 में) है जो सबसे बड़ी संख्या में ब्राउज़रों के साथ संगत हो सकता है, क्योंकि इसे किसी भी CSS3 गुणों की आवश्यकता नहीं है। हालांकि, विधि उन ब्राउज़रों पर काम नहीं करेगी जो समर्थन नहीं करते हैंcontentdeditable , सावधान रहें।

एक div के साथ समाधान contenteditable

जैसा कि @Getz द्वारा प्रस्तावित किया गया है , आप इसके साथ एक div का उपयोग कर सकते हैं contenteditableऔर फिर इसे कुछ div के साथ आकार दे सकते हैं। यहाँ एक उदाहरण है, दो खंडों के साथ जो ऊपरी बाईं ओर तैरते हैं और मुख्य 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>

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 (आप मूल कंटेनर की सीमा देख सकते हैं ...)

— मैक्सिम लोरेंट

हालांकि अधिक divs के लिए वर्कअराउंड की आवश्यकता होती है। पैरेन्ट तत्व जो पारदर्शी और सीमा के बिना है, ओवरलैपिंग डिवों के साथ बॉर्डर और बैकग्राउंड से भरा है और वांछित प्रभाव पैदा करने के लिए पैडिंग डिव के साथ है।

— क्वर्टी

@MaximeLorant मैं bad thingsकेवल उन लोगों के बारे में बता रहा था । उन परिस्थितियों का दुष्परिणाम होगा जो मैंने अभी-अभी पूछे हैं और आपने क्या किया है। लेकिन यह निश्चित रूप से एक अच्छा समाधान है। स्पष्टीकरण के लिए Thanx।

— राजेश पॉल

शानदार जवाब! और यहाँ मैं जाने वाला था और दोनों के बीच सामग्री विभाजन के साथ एक साथ दो पाठ क्षेत्रों का उपयोग करने की तर्ज पर कुछ सुझाव देता था।

— जरथुजत्र

Answer 2

निकट भविष्य में हम इसे css-shapesप्राप्त करने के लिए तथाकथित का उपयोग कर सकते हैं । संयुक्त के साथ contenteditableसेट विशेषता के साथ एक डिव किसी पाठ क्षेत्र को किसी भी प्रकार का आकार दे सकता है।truecss-shapes

वर्तमान में क्रोम कैनरी पहले से ही समर्थन करता है css-shapes । एक उदाहरण सीएसएस-आकृतियों के साथ क्या संभव है:

यहां वे पाठ-प्रवाह को परिभाषित करने के लिए एक बहुभुज आकार का उपयोग कर रहे हैं। अपनी बनावट के लिए इच्छित आकृति से मेल खाने के लिए दो बहुभुज बनाना संभव होना चाहिए।

के बारे css-shapesमें अधिक जानकारी में लिखा गया है: http://sarasoueidan.com/blog/css-shapes/

क्रोम कैनरी में सीएसएस-आकृतियों को सक्षम करने के लिए:

1. क्रोम को कॉपी और पेस्ट करें: // झंडे / # सक्षम-प्रायोगिक-वेब-प्लेटफॉर्म-फीचर्स एड्रेस बार में, फिर एंटर दबाएं।
2. उस अनुभाग के भीतर 'सक्षम करें' लिंक पर क्लिक करें।

3. ब्राउज़र विंडो के निचले भाग पर स्थित 'Relaunch Now' बटन पर क्लिक करें।

   से: 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

हो सकता है कि यह सामग्री संपादन योग्य हो ?

यह एक textarea नहीं है, लेकिन यदि आप इस आकृति के साथ एक div बनाने में सफल होते हैं, तो यह काम कर सकता है।

मुझे लगता है कि यह केवल textarea के साथ संभव नहीं है ...

एक छोटा सा उदाहरण: http://jsfiddle.net/qgfP6/5/

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

Answer 4

आप एक संतोषप्रद div के साथ काम कर सकते हैं, दो कोनों 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>

Comments

सभी अलग-अलग उपयोग मामलों की देखभाल के लिए इसे कुछ और जेएस काम की जरूरत है। लेकिन आधार वहां है।

— गिदोन

Answer 5

आप CSS क्षेत्र के साथ भी ऐसा कर सकते हैं

रीजन के साथ, आप पृष्ठ पर उनकी स्थिति की परवाह किए बिना किसी भी कंटेनर ऑर्डर को निर्दिष्ट करते हुए, मौजूदा स्टाइल वाले कंटेनरों में सामग्री प्रवाहित करने के लिए CSS गुणों का उपयोग कर सकते हैं।

(वेब प्लेटफॉर्म)

[वर्तमान में WebKit नाइटली, Safari 6.1+ और iOS7 में समर्थित है और ध्वज को सक्षम करने के बाद क्रोम और ओपेरा में पहले से ही उपयोग करने योग्य है: सक्षम-प्रायोगिक-वेब-प्लेटफ़ॉर्म-सुविधाएँ - caniuse , Web Platform ]

बेला

तो आप पाठ को 2 क्षेत्रों के माध्यम से प्रवाहित करके उस textarea आकार बना सकते हैं, और सामग्री पर सामग्री जोड़कर संपादित कर सकते हैं।

मार्कअप

<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 क्षेत्र: HTML और CSS3 के साथ समृद्ध पृष्ठ लेआउट

Comments

अच्छा! यद्यपि यह मुश्किल से समर्थित है (अधिकांश उपयोगकर्ता क्रोम कैनरी प्राप्त नहीं करना चाहते हैं और एक वेबसाइट का उपयोग करने के लिए प्रायोगिक झंडे को सक्षम करना चाहते हैं), यह निश्चित रूप से यह "होना चाहिए" है

— markasoftware

वास्तव में ... दुर्भाग्य से, यह फ़ायरफ़ॉक्स (अल्फा पर भी) और अन्य पर अभी तक काम नहीं करता है, और विक्रेता उपसर्गों की एक बुरी गंध है :( लेकिन विधि दिलचस्प है और कुछ महीनों / वर्षों में उपयोग किया जाना है।

— मैक्सिमे

सीएसएस क्षेत्रों, सीएसएस आकार, सीएसएस फिल्टर ... और क्या है 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

यह संभव नहीं है सर! एक 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

Comments

नहीं तुम गलत हो। यहां तक ​​कि वह divtextarea के बजाय s का उपयोग करता था। क्योंकि textarea को आकार में संशोधित नहीं किया जा सकता है! :) @Markasoftware इस जवाब को गलत साबित करते हुए आप गलत हैं! .. चूँकि यह केवल उसी का उत्तर है। केवल एक चीज जो यहां मौजूद नहीं है वह है छवि और उस आकृति के साथ संपादन योग्य div बनाने के लिए कोड!

— अफ़ज़ल अहमद ज़ीशान

क्या? अरे आओ भाई, अगर आप मुझे बिना किसी कारण के नीचे रखना चाहते हैं तो आपका स्वागत है! मेरा जवाब यहाँ पोस्ट किया गया: 9:58 उसने 10:10 पर जवाब पोस्ट किया: / मैं पहली बार इस सवाल का जवाब देने वाला था .. @ Markasoftware आप खुद के लिए समय देख सकते हैं। मुझे केवल इतना ही नहीं उकेरा गया है क्योंकि मैंने कोड प्रदान नहीं किया है। कैसे भी हो, मैंने उत्तर को शीर्ष 3 उत्तरदाताओं में पोस्ट किया है ..

— अफजल अहमद जीशान

योग्य वास्तव में जब मैं "सबसे पुराना" टैब पर जाता हूं तो पता चलता है कि आपका उत्तर दूसरा सबसे पुराना है

— markasoftware

यह इस तथ्य के कारण है कि यह बहुत अधिक उत्थान नहीं है! मैं यहां हर समय सक्रिय हूं, इसलिए मैं हाल ही में कैसे पोस्ट कर सकता हूं? और यह एक सरल answe था। तो क्या आप डाउनवोट को हटा सकते हैं? :)

— अफ़ज़ल अहमद जीशान

Answer 8

यदि आप सीएसएस आकृतियों के साथ गठबंधन करते हैंcontenteditable यह वेबकिट ब्राउज़र में किया जा सकता है।

पहले आपको ध्वज को सक्षम करना होगा: सक्षम-प्रायोगिक-वेब-प्लेटफ़ॉर्म-सुविधाएँ

फिर अपने वेबकिट ब्राउज़र को पुनः आरंभ करें और फिर इस 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;
}

तो पृथ्वी पर मुझे वह बहुभुज कैसे मिला?

इस साइट पर जाएं और अपना खुद का कस्टम आकार बनाएं!

ध्वज को सक्षम करने के बारे में नोट्स: ( यहाँ से )

आकार, क्षेत्र और ब्लेंड मोड सक्षम करने के लिए:

क्रोम को कॉपी और पेस्ट करें: // झंडे / # सक्षम-प्रायोगिक-वेब-प्लेटफॉर्म-फीचर्स एड्रेस बार में, फिर एंटर दबाएं। उस अनुभाग के भीतर 'सक्षम करें' लिंक पर क्लिक करें। ब्राउज़र विंडो के निचले भाग पर स्थित 'Relaunch Now' बटन पर क्लिक करें।

Comments

+1 (अच्छी तरह से प्रलेखित, संरचित) समाधान के लिए, मानक या नहीं।

— 23

@kinokijuf आपको एहसास है कि इन दिनों मानक कैसे सही आते हैं? इस मामले में, Adobe आकार के प्रस्ताव के साथ आया था, और वेबकिट इसे लागू करने वाला पहला व्यक्ति था। नवंबर से एडिटर ड्राफ्ट के रूप में देखना, यह शायद एक मालिकाना विस्तार नहीं कहा जा सकता है, और आप सभी जानते हैं कि बाद में और अधिक व्यापक रूप से लागू और मानकीकृत हो जाएगा। इस बीच गैर-वेबकिट उपयोगकर्ताओं को एक आयत, बड़ी डील मिलेगी। (हेक, फ़ायरफ़ॉक्स के लिए अभी भी एक उपसर्ग की आवश्यकता है box-sizing।)

— मिलिम्मोस

Answer 9

आप जटिल आकार बनाने के लिए Google वेब डिज़ाइनर टूल का उपयोग कर सकते हैंHTML5-canvas and CSS ।

अधिक आप इन आकृतियों के अंदर ग्रंथों को दर्ज करने के लिए टाइपिंग टूल जैसे अन्य उपकरण प्राप्त करेंगे।

चूंकि आउटपुट फ़ाइल में बहुत अधिक कोड होते हैं, जो Google वेब डिज़ाइनर टूल का उपयोग करके बनाए गए एक सैंपल डेमो का एक फ़ील प्रदान करता है

FIDDLE DEMO >>

Comments

फेल मेरे लिए काम नहीं करता है (= पाठ संपादन योग्य नहीं है) क्रोम पर 31.0 / विंडोज 7.

— इल्मरी करोनन

@ इल्मारिकारोनन = पाठ संपादन योग्य नहीं है ??? वास्तव में मुझे नहीं मिला इसे संपादन योग्य बनाने की क्या आवश्यकता है ??

— प्रशांत केसी

सवाल कुछ इस तरह पूछता है <textarea> (जैसे संपादन योग्य पाठ का एक बॉक्स) के , लेकिन एक गैर-आयताकार आकार के साथ। "संपादन योग्य" भाग के बिना, यहां बहुत कम चुनौती है - लोग HTML में फ्लोटिंग छवियों को HTML 2.0 में पेश करने के बाद से HTML में प्रवाहित पाठ कर रहे हैं।

— इल्मरी करोनें

सामग्री संपादन योग्य संपत्ति के साथ अद्यतन की गई फ़िडल। अब कंटेनर के अंदर का पाठ संपादन योग्य है।

— प्रशांत केसी

डेमो में, मैं 2 अलग-अलग ग्रंथों को संपादित कर सकता हूं, न कि 1 पूरे पाठ को। क्रोम 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;
    }
    }