jQuery - मूल्य की चौड़ाई के आधार पर आकार इनपुट का आकार बदलना?

Question

क्या इनपुट की मूल्य चौड़ाई प्राप्त करना संभव है और इनपुट को गतिशील रूप से आकार बदलना संभव है ताकि मूल्य फिट हो जाए?

http://jsfiddle.net/bzBdX/2/

Answer 1

:

$('#resizeme').keydown(function(){ // listen for keypresses 
var contents = $(this).val();  // get value 
var charlength = contents.length; // get number of chars 
newwidth = charlength*9;   // rough guesstimate of width of char 
$(this).css({width:newwidth});  // apply new width 
});​ 

आप व्यक्तिगत पसंद/पाठ आकार

उदाहरण पर गुणक को बदल सकता है

यहाँ एक उदाहरण है यहाँ वें है ई jQuery कोड:

$('input').each(function(){ 
var value = $(this).val(); 
var size = value.length; 
// playing with the size attribute 
//$(this).attr('size',size); 

// playing css width 
size = size*2; // average width of a char 
$(this).css('width',size*3); 

})​; 

http://jsfiddle.net/bzBdX/7/

Answer 2

कुछ सरल: http://jsfiddle.net/bzBdX/6/

Answer 3

$(function(){ 
    $("input").keyup(function(){ 
     $(this).stop().animate({ 
     width: $(this).val().length*7 
    },100)     
    }) 
})​ 

Answer 4

आप js बेला ... http://jsfiddle.net/ninadajnikar/bzBdX/9/ पर इस डेमो देख सकते हैं।

आप चौड़ाई मान अपडेट कर आप की तरह के रूप में यह

Answer 5

http://jsfiddle.net/bzBdX/11/

तो मैं अंतराल में डालने पत्र द्वारा एक उदाहरण है जहां यह चौड़ाई की गणना करने की कोशिश करता बना दिया है और की गणना वहाँ चौड़ाई

(function() { 
    var mDiv = $("<span />").text("M").appendTo("body"), 
     mSize = mDiv.width(); 
    mDiv.detach(); 

    var letterSize = function(s) { 
     var sDiv = $("<span />").text("M" + s + "M").appendTo("body"), 
      sSize = sDiv.width(); 

     sDiv.detach(); 

     return (sSize - (mSize * 2)) * 0.89; 
    }; 

    $("input[data-resise-me]").each(function() { 
     var minSize = $(this).width(); 

     var resizeInput = function() { 
      var calcSize = $.map($(this).val(), letterSize); 
      var inputSize = 0; 
      $.each(calcSize, function(i, v) { inputSize += v; }); 

      $(this).width(inputSize < minSize ? minSize : inputSize); 
     }; 

     $(this).on({ keydown: resizeInput, keyup: resizeInput }); 
    }); 
}()); 

शायद ऐसा करने का एक बेहतर तरीका है।

Answer 6

के रूप में क्रोम 25 और Firefox 19. पर परीक्षण किया गया इस उदाहरण (http://jsfiddle.net/9ezyz/)

function input_update_size() 
{ 
    var value = $(this).val(); 
    var size = 12; 

    // Looking for font-size into the input 
    if (this.currentStyle) 
     size = this.currentStyle['font-size']; 
    else if (window.getComputedStyle) 
     size = document.defaultView.getComputedStyle(this,null).getPropertyValue('font-size'); 
    $(this).stop().animate({width:(parseInt(size)/2+1)*value.length},500); 
    //$(this).width((parseInt(size)/2+1)*value.length); 
} 

$('input') 
    .each(input_update_size) 
    .keyup(input_update_size); 

Answer 7

मैं GitHub पर एक jQuery प्लगइन है: https://github.com/MartinF/jQuery.Autosize.Input

यह इनपुट के मूल्य को प्रतिबिंबित करती है तो यह गणना कर सकते हैं अनुमान लगाने या अन्य दृष्टिकोणों की बजाय वास्तविक लंबाई।

आप यहाँ एक लाइव उदाहरण देख सकते हैं: http://jsfiddle.net/mJMpw/6/

उदाहरण:

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' /> 

input[type="data-autosize-input"] { 
    width: 90px; 
    min-width: 90px; 
    max-width: 300px; 
    transition: width 0.25s;  
} 

तुम सिर्फ न्यूनतम/अधिकतम-चौड़ाई सेट और चौड़ाई पर एक संक्रमण का उपयोग करता है, तो आप एक अच्छा प्रभाव चाहते हैं कि सीएसएस का उपयोग ।

आप इनपुट तत्व पर डेटा-ऑटोसाइज-इनपुट विशेषता के लिए जेसन नोटेशन में मान के रूप में अंत में स्थान/दूरी निर्दिष्ट कर सकते हैं।

बेशक आप भी बस इसे jQuery

$("selector").autosizeInput(); 

Answer 8

का उपयोग कर प्रारंभ कर सकते हैं @ManseUK ने उल्लेख किया। यह लाइन मेरे लिए काम करती है। JQuery संस्करण 1.8

$ ('# resizeme')।सीएसएस ({चौड़ाई: newwidth});

Answer 9

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

कुछ इस तरह:

function resizeInput() { 
    $('body').append('<div class="new_width">'+$(this).val()+'</div>'); 
    $(this).css('width', $('.new_width').width()); 
    $('.new_width').remove() 
} 
$('input') 
    // event handler 
    .keyup(resizeInput) 
    // resize on page load 
    .each(resizeInput); 

Answer 10

वर्तमान जवाब जटिल करने के लिए waay थे। एक त्वरित एक

$('#myinput').width($('#myinput').prop('scrollWidth')) 

इनपुट कुंजीडाउन/अप/प्रेस ईवेंट में उपरोक्त जोड़ना मामूली है। क्रोम