कैसे <input> टैग है, जो एक रूपरेखा

Question

मैं Angular Material उपयोग कर रहा हूँ और वहाँ इस फार्म एक स्वत: पूर्ण फ़ील्ड है, जिसके लिए मैं md-autocomplete हो रहा है जो एक

<input type = "text" /> 

का उपयोग करता है के द्वारा बनाई गई है में काट-छांट के बिना पाठ प्रदर्शित करने के लिए

आंतरिक रूप से टेक्स्ट फ़ील्ड प्रस्तुत करने के लिए। मुझे इसके साथ कोई समस्या है। जब भी टेक्स्ट फ़ील्ड की चौड़ाई से अधिक लंबा होता है, तो मैं इसे लपेटना चाहता हूं, ताकि इसे छोटा नहीं किया जा सके, और अगली पंक्ति में दिखाया गया हो।

लेकिन <input> के साथ वहाँ शैली ताकि अतिप्रवाह पाठ अगली पंक्ति में प्रदर्शित होता है कोई रास्ता नहीं (मैं जानता हूँ कि पाठ क्षेत्र मेरी आवश्यकता फिट बैठता है, लेकिन md-autocompleteinput उपयोग करता है) है।

तो प्रश्न यह है कि मैं बिना छेड़छाड़ के पाठ को कैसे प्रदर्शित कर सकता हूं। कोई सुझाव होगा। कृपया सहायता कीजिए!

Answer 1

मुझे नहीं लगता कि इनपुट प्रकार = "टेक्स्ट" के साथ यह संभव है, लेकिन आपके आस-पास के काम के रूप में इनपुट में शीर्षक विशेषता का उपयोग कर सकते हैं और समान सामग्री के समान सामग्री हो सकती है। उदाहरण के लिए

<input type="text" title="something that exceeds the width of the box" value="something that exceeds the width of the box"> 

यह सुनिश्चित करेगा कि आपकी सामग्री पूरी तरह से होवर पर दिखाई देगी।

Answer 2

डॉक्टर link से: जब उपयोगकर्ता पाठ जब उपयोगकर्ता एक आइटम

मेरे सुझाव आपके md-autocomplete छिपा हुआ है का चयन

md-selected-item-change अभिव्यक्ति के सक्रिय होने पर बदल

• md-search-text-change अभिव्यक्ति निकाल दिया जाता है सीएसएस के माध्यम से और इन अभिव्यक्तियों को एक टेक्स्टरेरा अपडेट करने के लिए हुक करें जिसे उपयोगकर्ता देखें और बातचीत करेगा।

  क्षमा करें अभी के लिए कोई काम कोड नहीं है। लेकिन यदि आप चाहें तो मैं एक प्लंकर बना सकता हूं। मैंने यूई-ऑटोकंपलेट के लिए समान बनाया है। ng-model="data.uiModel और ng-model=data.actualModel"

Answer 3

इनपुट तत्व के साथ ग्रंथों को छोटा करने के लिए यह संभव नहीं है, लेकिन एक अन्य चीज को टेक्स्टरेरा तत्व प्रदान करने और इनपुट फ़ील्ड के शीर्ष पर रखने के लिए किया जा सकता है।

कुछ इस के समान:

HTML: <div class="container-text"> <input type="text" id="myText" /> </div>

जावास्क्रिप्ट

(function(){if(document.querySelector('#myText')){ 
var elm = document.createElement('textarea'); 
elm.className = 'myTextArea'; 
document.querySelector('.container-text').appendChild(elm); 
document.querySelector('#myText').addEventListener('keyup', textChangeUpdate)} 
function textChangeUpdate(){ 
    document.querySelector('.myTextArea').value = document.querySelector('#myText').value; 
    document.querySelector('.myTextArea').focus(); 
}}()); 

सीएसएस

.container-text{ 
    position:relative; 
} 
.container-text input, .container-text textarea{ 
    position:absolute; 
    top: 0; 
    left:0; 
    height:40px; 
    width:130px; 
    z-index:99; 
} 
.container-text input{ 
    z-index:100; 
    opacity:0; 
} 

https://jsfiddle.net/5ysfbo3a/

आप आयाम लाने के लिए सीएसएस को संशोधित करने और देखने के लिए और अपनी वेबसाइट जरूरत के अनुसार महसूस करने की जरूरत है।

नोट: सुनिश्चित करें कि दोनों तत्वों का आयाम समान है ताकि आप देख सकें कि md-autocomplete तत्व दृश्यमान textarea के नीचे दिखाई दे।

उम्मीद है कि इससे मदद मिलती है।

चीयर्स, अशोक

Answer 4

आप ऐसा कर सकते हैं textarea और JavaScript का उपयोग पाठ क्षेत्र में परिवर्तन के लिए एक घटना श्रोता शामिल करके।

यहां एक काम कर रहे JSFiddle है।

Answer 5

सरलतम साधन केवल इनपुट छोड़ना है और केवल इनपुट बॉक्स (या नीचे) क्वेरी को प्रदर्शित करना है। इनपुट के तहत डिफॉल्ट डिस्प्ले द्वारा फ़िल्टर सूची के रूप में ऊपर बेहतर है। इस विधि का उपयोग एक समझौता है, लेकिन काम करता है। खोज-टेक्स्ट-क्षेत्र क्लिक पर इनपुट बॉक्स पर ध्यान केंद्रित करने के लिए नियंत्रण के साथ आप हमेशा शून्य आकार या छुपा इनपुट इनपुट कर सकते हैं।

<md-input-container flex> 
     <span class="md-longwinded-search">{{ctrl.searchText}}</span> 
     <label>Label</label> 
     <input type="text"/> 
    </md-input-container> 

सीएसएस:

.md-longwinded-search { 
     width: 100%; 
     height: auto; 
     word-wrap: normal; 
     overflow: auto; 
    } 

Answer 6

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

http://jsfiddle.net/HB7LU/20128/

और यहाँ एक कोड दिखा यह md-autocomplete नियंत्रण के साथ एकीकृत कलम है। मैंने डेटा को नियंत्रक या कुछ भी तार करने की कोशिश नहीं की। यह आप पर है

http://codepen.io/anon/pen/pjBKWR

महत्वपूर्ण बातें मेरी कार्यान्वयन के बारे में गौर करने योग्य

• एकल लाइन पाठ इनपुट एक बेहतरीन सुविधा बनी हुई है और बात है जिसके साथ उपयोगकर्ता संपर्क रखता है और आइटम जो रखती है उपयोगकर्ता इनपुट का अंतिम मूल्य।
• टेक्स्टरेरा का उपयोग सिर्फ विस्तारित टेक्स्ट फ़ील्ड की उपस्थिति देने के लिए दृश्य प्रदर्शन के लिए किया जाता है।
• कीबोर्ड नेविगेशन अभी भी काम करता है, और आपका दायरा अभी भी आपके मूल पाठ इनपुट से जुड़ा हुआ है।
• यह 100% ड्रॉप-इन तैयार नहीं है - आपको यह सुनिश्चित करना होगा कि आपकी शैलियों का मिलान हो और वह सब - जो आपके ऊपर है। मैंने डेमो भी रखा है ताकि आप केवल फोकस करते समय टेक्स्टरेआ आगे आ सकें। लॉन्च करने से पहले, आप अपने इनपुट की अस्पष्टता 0 पर सेट करना चाहेंगे;

और कोड कोड:

myApp.directive('autoExpandInput', function() { 
    return { 
     restrict: 'E', 
     replace: 'true', 
     template: '' + 
     '<div>' + 
      '<textarea rows="1" tabindex="-1"></textarea>' + 
      '<input type="text" value="{{inputValue}}" />' + 
     '</div>', 
     link: function(scope, elem, attrs) { 
      elem.find('input').bind('focus', function (ev) { 
       ev.target.tabIndex = -1; 
       ev.target.previousSibling.focus(); 
      }); 
      elem.find('textarea').bind('blur', function (ev) { 
       setTimeout(function() { 
        ev.target.nextSibling.tabIndex = 0; 
       }); 
      })[0].oninput = function (ev) { 
      var textarea = ev.target; 
      scope.$apply(function() { 
       scope.inputValue = textarea.value; 
      }); 

      textarea.style.height = ""; 
      // you may need to play around with the math here a little 
      if (textarea.clientHeight < textarea.scrollHeight + 2) { 
       textarea.style.height = textarea.scrollHeight + 2 + "px"; 
       textarea.nextSibling.style.height = textarea.scrollHeight + 2 + "px"; 
      } 
     } 
     } 
    }; 
});