जैसे ही मैं टाइप करता हूँ html टेक्स्ट इनपुट फील्ड बढ़ता है?

Question 1

मैं प्रारंभिक पाठ इनपुट आकार css में सेट कर सकता हूं, जैसे:

width: 50px;

लेकिन मैं चाहूंगा कि जब मैं टाइप करूं तो यह तब तक बढ़े जब तक कि यह उदाहरण 200px तक न पहुंच जाए। क्या यह सीधे सीएसएस, एचटीएमएल में किया जा सकता है, अधिमानतः जावास्क्रिप्ट के बिना?

अपने js / jquery के समाधान भी अवश्य पोस्ट करें, लेकिन अगर यह उनके बिना संभव है - तो यह बहुत अच्छा होगा।

मेरी कोशिश यहाँ:

http://jsfiddle.net/jszjz/2/

Question 2

यहाँ केवल CSS और सामग्री संपादन योग्य के साथ एक उदाहरण दिया गया है :

jsFiddle उदाहरण

सीएसएस

span 
{
    border: solid 1px black;
}
div 
{
    max-width: 200px;   
}

एचटीएमएल

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

Question 3

मैंने सिर्फ आपके लिए यह लिखा है, मुझे आशा है कि आप इसे पसंद करेंगे :) कोई गारंटी नहीं है कि यह क्रॉस-ब्राउज़र है, लेकिन मुझे लगता है कि यह :) है

(function(){
    var min = 100, max = 300, pad_right = 5, input = document.getElementById('adjinput');

    input.style.width = min+'px';
    input.onkeypress = input.onkeydown = input.onkeyup = function(){
        var input = this;
        setTimeout(function(){
            var tmp = document.createElement('div');
            tmp.style.padding = '0';
            if(getComputedStyle)
                tmp.style.cssText = getComputedStyle(input, null).cssText;
            if(input.currentStyle)
                tmp.style.cssText = input.currentStyle.cssText;
            tmp.style.width = '';
            tmp.style.position = 'absolute';
            tmp.innerHTML = input.value.replace(/&/g, "&amp;")
                                       .replace(/</g, "&lt;")
                                       .replace(/>/g, "&gt;")
                                       .replace(/"/g, "&quot;")
                                       .replace(/'/g, "&#039;")
                                       .replace(/ /g, '&nbsp;');
            input.parentNode.appendChild(tmp);
            var width = tmp.clientWidth+pad_right+1;
            tmp.parentNode.removeChild(tmp);
            if(min <= width && width <= max)
                input.style.width = width+'px';
        }, 1);
    }
})();

जेएसफिल्ड

Question 4

यदि आप प्रदर्शित करने के लिए स्पैन सेट करते हैं: इनलाइन-ब्लॉक, ऑटोमैटिक हॉरिज़ॉन्टल और वर्टिकल रिसाइज़िंग वर्क बहुत अच्छी तरह से:

<span contenteditable="true" 
      style="display: inline-block;
             border: solid 1px black;
             min-width: 50px; 
             max-width: 200px">
</span>

स्निपेट का विस्तार करें

Question 5

कैसे के बारे में प्रोग्राम इनपुट पर आकार विशेषता को संशोधित?

शब्दार्थ (imo), यह समाधान स्वीकृत समाधान से बेहतर है क्योंकि यह अभी भी उपयोगकर्ता इनपुट के लिए इनपुट फ़ील्ड का उपयोग करता है लेकिन यह थोड़ा सा jQuery का परिचय देता है। साउंडक्लाउड अपनी टैगिंग के लिए ऐसा ही कुछ करता है।

<input size="1" />

$('input').on('keydown', function(evt) {
    var $this = $(this),
        size = parseInt($this.attr('size'), 10),
        isValidKey = (evt.which >= 65 && evt.which <= 90) || // a-zA-Z
                     (evt.which >= 48 && evt.which <= 57) || // 0-9
                     evt.which === 32;

    if ( evt.which === 8 && size > 0 ) {
        // backspace
        $this.attr('size', size - 1);
    } else if ( isValidKey ) {
        // all other keystrokes
        $this.attr('size', size + 1);
    }
});

http://jsfiddle.net/Vu9ZT/

Question 6

कुछ बातें दिमाग में आती हैं:

onkeydownअपने टेक्स्ट फ़ील्ड में हैंडलर का उपयोग करें , टेक्स्ट को मापें *, और उसके अनुसार टेक्स्ट बॉक्स का आकार बढ़ाएँ।

:focusएक बड़ी चौड़ाई के साथ अपने टेक्स्ट बॉक्स में एक सीएसएस क्लास संलग्न करें। फ़ोकस करने पर आपका बॉक्स बड़ा हो जाएगा। यह वही नहीं है जो आप पूछ रहे हैं, बल्कि इसी तरह का है।

* यह जावास्क्रिप्ट में पाठ को मापने के लिए सीधा नहीं है। की जाँच करें इस सवाल का कुछ विचार के लिए।

Question 7

से: क्या टेक्स्ट फ़ील्ड के लिए jQuery ऑटोग्रो प्लगइन है?

यहां एक डेमो देखें: http://jsbin.com/ahaxe

प्लगइन:

(function($){

    $.fn.autoGrowInput = function(o) {

        o = $.extend({
            maxWidth: 1000,
            minWidth: 0,
            comfortZone: 70
        }, o);

        this.filter('input:text').each(function(){

            var minWidth = o.minWidth || $(this).width(),
                val = '',
                input = $(this),
                testSubject = $('<tester/>').css({
                    position: 'absolute',
                    top: -9999,
                    left: -9999,
                    width: 'auto',
                    fontSize: input.css('fontSize'),
                    fontFamily: input.css('fontFamily'),
                    fontWeight: input.css('fontWeight'),
                    letterSpacing: input.css('letterSpacing'),
                    whiteSpace: 'nowrap'
                }),
                check = function() {

                    if (val === (val = input.val())) {return;}

                    // Enter new content into testSubject
                    var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,'&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                    testSubject.html(escaped);

                    // Calculate new width + whether to change
                    var testerWidth = testSubject.width(),
                        newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                        currentWidth = input.width(),
                        isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                                             || (newWidth > minWidth && newWidth < o.maxWidth);

                    // Animate width
                    if (isValidWidthChange) {
                        input.width(newWidth);
                    }

                };

            testSubject.insertAfter(input);

            $(this).bind('keyup keydown blur update', check);

        });

        return this;

    };

})(jQuery);

Question 8

यहां आप कुछ इस तरह की कोशिश कर सकते हैं

संपादित करें: विस्तारित उदाहरण (एक नया समाधान जोड़ा गया) http://jsfiddle.net/jszjz/10/

कोड स्पष्टीकरण

var jqThis = $('#adjinput'), //object of the input field in jQuery
    fontSize = parseInt( jqThis.css('font-size') ) / 2, //its font-size
    //its min Width (the box won't become smaller than this
    minWidth= parseInt( jqThis.css('min-width') ), 
    //its maxWidth (the box won't become bigger than this)
    maxWidth= parseInt( jqThis.css('max-width') );

jqThis.bind('keydown', function(e){ //on key down
   var newVal = (this.value.length * fontSize); //compute the new width

   if( newVal  > minWidth && newVal <= maxWidth ) //check to see if it is within Min and Max
       this.style.width = newVal + 'px'; //update the value.
});

और सीएसएस बहुत सीधा है

#adjinput{
    max-width:200px !important;
    width:40px;
    min-width:40px;
    font-size:11px;
}

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

Question 9

मुझे पता है कि यह एक गंभीर रूप से पुरानी पोस्ट है - लेकिन मेरा जवाब वैसे भी दूसरों के लिए उपयोगी हो सकता है, इसलिए यहाँ जाता है। मैंने पाया कि अगर संतोषात्मक div के लिए मेरी CSS शैली परिभाषा में 200 की ऊंचाई के बजाय 200 की न्यूनतम ऊंचाई है, तो div स्वचालित रूप से मापता है।

Question 10

तुम सिर्फ बढ़ रही में रुचि रखते हैं, तो आप अद्यतन कर सकते हैं widthकरने के लिए scrollWidth, जब भी की सामग्री inputतत्व बदल जाता है।

document.querySelectorAll('input[type="text"]').forEach(function(node) {
  node.onchange = node.oninput = function() {
    node.style.width = node.scrollWidth+'px';
  };
});

लेकिन यह तत्व को छोटा नहीं करेगा।

Question 11

बेशक, आप किस दृष्टिकोण का उपयोग करते हैं, यह इस बात पर निर्भर करता है कि आपका अंतिम लक्ष्य क्या है। यदि आप प्रपत्रों के साथ परिणाम सबमिट करना चाहते हैं तो मूल प्रपत्र तत्वों का उपयोग करने का मतलब है कि आपको सबमिट करने के लिए स्क्रिप्टिंग का उपयोग करने की आवश्यकता नहीं है। इसके अलावा, यदि पटकथा को बंद कर दिया जाता है, तो फ़ॉलबैक अभी भी फैंसी बढ़ने-सिकुड़ने के प्रभावों के बिना काम करता है। यदि आप एक से बाहर सादा पाठ प्राप्त करना चाहते हैं contenteditable तत्व आप हमेशा भी तरह पटकथा का उपयोग कर सकते node.textContent एचटीएमएल निकाल देते है कि उपयोगकर्ता इनपुट में डालने ब्राउज़रों।

यह संस्करण पिछले कुछ पदों पर थोड़े से परिशोधन के साथ मूल रूप तत्वों का उपयोग करता है।

यह सामग्री को भी सिकुड़ने की अनुमति देता है।

बेहतर नियंत्रण के लिए CSS के संयोजन में इसका उपयोग करें।

<html>

<textarea></textarea>
<br>
<input type="text">


<style>

textarea {
  width: 300px;
  min-height: 100px;
}

input {
  min-width: 300px;
}


<script>

document.querySelectorAll('input[type="text"]').forEach(function(node) {
  var minWidth = parseInt(getComputedStyle(node).minWidth) || node.clientWidth;
  node.style.overflowX = 'auto'; // 'hidden'
  node.onchange = node.oninput = function() {
    node.style.width = minWidth + 'px';
    node.style.width = node.scrollWidth + 'px';
  };
});

आप <textarea> तत्वों के साथ कुछ इसी तरह का उपयोग कर सकते हैं

document.querySelectorAll('textarea').forEach(function(node) {
  var minHeight = parseInt(getComputedStyle(node).minHeight) || node.clientHeight;
  node.style.overflowY = 'auto'; // 'hidden'
  node.onchange = node.oninput = function() {
    node.style.height = minHeight + 'px';
    node.style.height = node.scrollHeight + 'px';
  };
});

यह क्रोम पर झिलमिलाहट नहीं करता है, परिणाम अन्य ब्राउज़रों पर भिन्न हो सकते हैं, इसलिए परीक्षण करें।

Question 12

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

function travel_keyup(e)
{
    if (e.target.value.length == 0) return;
    var oSpan=document.querySelector('#menu-enter-travel span');
    oSpan.textContent=e.target.value;
    match_span(e.target, oSpan);
}
function travel_keydown(e)
{
    if (e.key.length == 1)
    {
        if (e.target.maxLength == e.target.value.length) return;
        var oSpan=document.querySelector('#menu-enter-travel span');
        oSpan.textContent=e.target.value + '' + e.key;
        match_span(e.target, oSpan);
    }
}
function match_span(oInput, oSpan)
{
    oInput.style.width=oSpan.getBoundingClientRect().width + 'px';
}

window.addEventListener('load', function()
{
    var oInput=document.querySelector('#menu-enter-travel input');
    oInput.addEventListener('keyup', travel_keyup);
    oInput.addEventListener('keydown', travel_keydown);

    match_span(oInput, document.querySelector('#menu-enter-travel span'));
});

#menu-enter-travel input
{
	width: 8px;
}
#menu-enter-travel span
{
	visibility: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
}

<div id="menu-enter-travel">
<input type="text" pattern="^[0-9]{1,4}$" maxlength="4">KM
<span>9</span>
</div>

स्निपेट का विस्तार करें

Question 13

यदि आपको ch माप का उपयोग करने की अनुमति है (मोनोस्पाज़्ड) तो यह पूरी तरह से हल हो जाता है कि मैं क्या करने की कोशिश कर रहा था।

onChange(e => {
    e.target.style.width = `${e.target.length}ch`;
})

यह वही था जो मुझे चाहिए था लेकिन मुझे यकीन नहीं है कि यह गतिशील चौड़ाई के फ़ॉन्ट-परिवारों के लिए काम करता है।

Question 14

उन लोगों के लिए जो किसी ऐसे समाधान की तलाश कर रहे हैं जो इनपुट या टेक्स्टारिया के लिए काम करता है, यह सबसे आसान समाधान है जो मैं भर में आया हूं। CSS की केवल कुछ पंक्तियाँ और JS की एक पंक्ति।

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

Question 15

आपको बस इतना करने की ज़रूरत है कि इनपुट फ़ील्ड का तत्व प्राप्त करें जिसे आप टाइप करना चाहते हैं और सीएसएस में, इनपुट की चौड़ाई को ऑटो पर सेट करें और 50px कहने के लिए एक मिनट की चौड़ाई सेट करें।