자동 스케일링 입력 [TYPE = 텍스트] 값 폭을 위해?

해결법

1.당신은 입력 내용의 길이와 크기 속성을 설정하여이 쉬운 방법을 수행 할 수 있습니다

당신은 입력 내용의 길이와 크기 속성을 설정하여이 쉬운 방법을 수행 할 수 있습니다
```
function resizeInput() {
    $(this).attr('size', $(this).val().length);
}

$('input[type="text"]')
    // event handler
    .keyup(resizeInput)
    // resize on page load
    .each(resizeInput);
```
참조 : http://jsfiddle.net/nrabinowitz/NvynC/

이것은 내가 브라우저에 의존 의심하는 오른쪽에 약간의 패딩을 추가 할 것으로 보인다. 당신이 입력에 정말 빡빡하고 싶었다면, 당신은 당신의 텍스트의 픽셀 크기를 계산하기 위해 jQuery를 사용하여, 나는이 관련 질문에 대해 설명하는 것과 같은 기술을 사용할 수 있습니다.
2.나는이 작업을 수행하는 몇 가지 방법을 볼 수 있지만 글꼴의 폭을 계산하는 것은 단지 추정입니다, 항상 100 % 정확하지 않다있다.

나는이 작업을 수행하는 몇 가지 방법을 볼 수 있지만 글꼴의 폭을 계산하는 것은 단지 추정입니다, 항상 100 % 정확하지 않다있다.

I은 측정 숨겨진 자리를 구비하여 상기 입력 폭을 조정하는 화소 완벽한 방법을 만들 수 있었다.

jQuery를 (권장)

() {(기능 $ . $ ( '# 숨기기') 텍스트 ($ ( '#의 TXT') 발 ().); . $ ( '#의 TXT')의 폭 ($ ( '# 숨기기')의 폭 ().); }).의 ( "입력", 함수 () { . $ ( '# 숨기기') 텍스트 ($ ( '#의 TXT') 발 ().); . $ ( '#의 TXT')의 폭 ($ ( '# 숨기기')의 폭 ().); }); 몸, , #txt #숨는 장소{ 글꼴 : 상속; 여백 : 0; 패딩 : 0; } #txt { 테두리 : 없음; 색상 : # 888; 최소 폭 : 10px; } #숨는 장소{ 표시 : 없음; 공백 : 사전; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
로렘 입숨 <스팬 ID = "닫기"> <입력 ID = "TXT"TYPE = "텍스트"값 = "... 여기 입력"> egestas는 arcu.

순수 자바 스크립트

나는 CSS에 약간의 비틀기가이 솔루션을 수용하는 데 필요한 그래서 jQuery를 숨겨진 요소의 폭을 계산하는 방법을 확인할 수 없습니다.

VAR 숨기기 = document.getElementById를 ( '숨기기'); VAR TXT = document.getElementById를 ( 'TXT'); ()의 크기를 조정; txt.addEventListener ( "입력", 리사이즈); 크기 조정 기능 () { hide.textContent = txt.value; txt.style.width = hide.offsetWidth + "픽셀"; } 몸, , #txt #hide { 글꼴 : 상속; 여백 : 0; 패딩 : 0; } #txt { 테두리 : 없음; 색상 : # 888; 최소 폭 : 10px; } #hide { 위치 : 절대; 키 : 0; 오버 플로우 : 숨겨진; 공백 : 사전; }
로렘 입숨 <스팬 ID = "닫기"> <입력 ID = "TXT"TYPE = "텍스트"값 = "... 여기 입력"> egestas arcu.
3.어떤 이유로 다른 솔루션이 작동하지 않는 경우, 당신은 입력 요소 대신의 contentEditable 경간을 사용할 수 있습니다.

어떤 이유로 다른 솔루션이 작동하지 않는 경우, 당신은 입력 요소 대신의 contentEditable 경간을 사용할 수 있습니다.
```
<span contenteditable="true">dummy text</span>
```
이 해킹의 더와 바꿈, 링크 및 기타 HTML을 사용자가 입력시키는 등 완전히 unsanitized HTML 입력을 허용하는 심각한 단점이있다 (붙여 넣기)합니다.

당신은 매우 신중하게 입력을 살균하지 않는 한 당신은 아마이 솔루션을 사용해서는 안 그래서 ...

업데이트 : 당신은 아마 아래 DreamTeK의 솔루션을 사용하고 싶습니다.
4.편집 : 이제 플러그인 공백 문자를 후행와 함께 작동합니다. 그것을 지적 주셔서 감사합니다 @JavaSpyder

편집 : 이제 플러그인 공백 문자를 후행와 함께 작동합니다. 그것을 지적 주셔서 감사합니다 @JavaSpyder

다른 대부분의 답변은 내가 필요 일치하지 않았기 때문에 (또는 단순히 전혀 작동하지 않았다) 나는 당신의 CSS 나 HTML을 변경할 필요없이 입력 픽셀 완벽한 스케일링에 그 결과 플러그인 적절한 jQuery를에 아드리안 B의 답변을 수정했습니다.

예 : HTTPS : //jsfiddle.net/587aapc2/

. 사용 : $ ( "입력") 자동 크기 ({패딩 : 20의 minWidth : 20의 maxWidth 300});

플러그인:

// JQuery와 플러그인 : $ .fn.textWidth = 기능 (_text, _font) {// GET 폭 글꼴과 텍스트의 색입니다. 사용 : $ ( "DIV") textWidth ();. VAR fakeEl = $ ( '') 감추기 () appendTo (는 document.body)는 .text (_text || this.val () || this.text ()) CSS ({폰트 :... _font || )} "사전": 공백 this.css ( '글꼴') fakeEl.width 폭 = (); fakeEl.remove (); 폭 리턴; }; $ .fn.autoresize = 기능 (옵션) {// 컨텐츠 크기에 따라 요소의 크기를 조정합니다. . 사용량 : $ ( "입력") 자동 크기 ({패딩 : 10의 minWidth : 0의 maxWidth 100}); 옵션 = $ .extend ({패딩 : 10의 minWidth : 0의 maxWidth : 10000}, 옵션 || {}); $ (이) CSTE 연구진 ( "입력", 함수 () { $ (이) .CSS ( '폭'Math.min (options.maxWidth, Math.max (options.minWidth, $ (이) .textWidth () + options.padding))); .}) 트리거 ( '입력'); 이를 반환; } // 유무 <입력> 자동으로 크기를 조정 . $ ( "입력") 자동 크기 ({패딩 : 20의 minWidth : 40의 maxWidth 300}); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <입력 값 = "I 마술 조정">

호출 : . $ ( "입력") 자동 크기 ({패딩 : 20의 minWidth : 40의 maxWidth 300});
5.내가 GitHub의에 jQuery 플러그인이 있습니다 https://github.com/MartinF/jQuery.Autosize.Input

내가 GitHub의에 jQuery 플러그인이 있습니다 https://github.com/MartinF/jQuery.Autosize.Input

또한, 입력 값을 반영 폭과 입력의 폭을 설정하기위한 용도를 계산한다.

http://jsfiddle.net/mJMpw/2175/ : 당신은 여기에 라이브 예를 볼 수 있습니다

그것을 사용하는 방법의 예 (A jsfiddle 링크를 게시 할 때 몇 가지 코드가 필요하기 때문에)
```
<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;    
}
```
당신은 세트 최소 / 최대 폭 CSS를 사용하면 좋은 효과를 원하는 경우 폭에 전환을 사용합니다.

사용자는 입력 요소의 데이터 autoSize의 입력 특성 JSON 표기법 값 끝에 공간 / 거리를 지정할 수있다.

물론 당신은 또한 단지 jQuery를 사용하여 초기화 할 수 있습니다
```
$("selector").autosizeInput();
```

6.좋은 많은 여기에 답이 이미 있습니다. 재미를 위해, 나는 다른 답변과 내 자신의 아이디어를 기반으로, 아래에이 솔루션을 구현했습니다.

좋은 많은 여기에 답이 이미 있습니다. 재미를 위해, 나는 다른 답변과 내 자신의 아이디어를 기반으로, 아래에이 솔루션을 구현했습니다.

<input class="adjust">

입력 요소는 정확한 픽셀 오프셋 조정 부가이 정의 될 수있다.

function adjust(elements, offset, min, max) {

    // Initialize parameters
    offset = offset || 0;
    min    = min    || 0;
    max    = max    || Infinity;
    elements.each(function() {
        var element = $(this);

        // Add element to measure pixel length of text
        var id = btoa(Math.floor(Math.random() * Math.pow(2, 64)));
        var tag = $('<span id="' + id + '">' + element.val() + '</span>').css({
            'display': 'none',
            'font-family': element.css('font-family'),
            'font-size': element.css('font-size'),
        }).appendTo('body');

        // Adjust element width on keydown
        function update() {

            // Give browser time to add current letter
            setTimeout(function() {

                // Prevent whitespace from being collapsed
                tag.html(element.val().replace(/ /g, '&nbsp'));

                // Clamp length and prevent text from scrolling
                var size = Math.max(min, Math.min(max, tag.width() + offset));
                if (size < max)
                    element.scrollLeft(0);

                // Apply width to element
                element.width(size);
            }, 0);
        };
        update();
        element.keydown(update);
    });
}

// Apply to our element
adjust($('.adjust'), 10, 100, 500);

조정은 CSS 전환과 함께 부드럽게됩니다.

.adjust {
    transition: width .15s;
}

여기에 바이올린입니다. 나는 깨끗한 솔루션을 찾고이 캔 도움말 다른 사람을 바랍니다.

7.대신 사업부를 만들고 그 폭을 측정하려고, 나는 그것을 직접 더 정확 캔버스 요소를 사용하여 폭을 측정하는 것이 더 신뢰할 수있는 것 같아요.

대신 사업부를 만들고 그 폭을 측정하려고, 나는 그것을 직접 더 정확 캔버스 요소를 사용하여 폭을 측정하는 것이 더 신뢰할 수있는 것 같아요.

function measureTextWidth(txt, font) {
    var element = document.createElement('canvas');
    var context = element.getContext("2d");
    context.font = font;
    return context.measureText(txt).width;
}

지금 당신은 몇 가지 입력 요소의 폭이 작업을 수행하여 시간에 어느 시점에 있어야 무엇을 측정하기 위해 이것을 사용할 수 있습니다 :

// assuming inputElement is a reference to an input element (DOM, not jQuery)
var style = window.getComputedStyle(inputElement, null);
var text = inputElement.value || inputElement.placeholder;
var width = measureTextWidth(text, style.font);

이것은 (아마도 부동 소수점) 숫자를 반환합니다. 당신은 당신이 시도 할 수 있습니다 패딩에 대한 계정합니다 :

  var desiredWidth = (parseInt(style.borderLeftWidth) +
      parseInt(style.paddingLeft) +
      Math.ceil(width) +
      1 + // extra space for cursor
      parseInt(style.paddingRight) +
      parseInt(style.borderRightWidth))
  inputElement.style.width = desiredWidth + "px";

8.여기로이 문제를 해결할 수 있습니다 :) http://jsfiddle.net/MqM76/217/

여기로이 문제를 해결할 수 있습니다 :) http://jsfiddle.net/MqM76/217/

HTML :

<input id="inpt" type="text" />
<div id="inpt-width"></div>

JS :

$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl =      $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width(); 
};

$('#inpt').on('input', function() {
    var padding = 10; //Works as a minimum width
    var valWidth = ($(this).textWidth() + padding) + 'px';
    $('#'+this.id+'-width').html(valWidth);
    $('#inpt').css('width', valWidth);
}).trigger('input');

9.불행하게도 크기 속성은 매우 잘 작동하지 않습니다. 여분의 공간이 너무 작은 공간 글꼴 설정 방법에 따라, 때로는있을 것입니다. (예를 확인)

불행하게도 크기 속성은 매우 잘 작동하지 않습니다. 여분의 공간이 너무 작은 공간 글꼴 설정 방법에 따라, 때로는있을 것입니다. (예를 확인)

당신이 잘 작동이 원하는 경우, 입력에 변화를보고 시도하고 크기를 조정합니다. 당신은 아마 입력의 scrollWidth로 설정하고자합니다. 우리는 너무, 상자 크기를 설명해야합니다.

다음 예에서, I는 (CSS 수동 설정) 당초 폭보다 큰 scrollWidth를 가지는 것을 방지하기 위해 1 입력의 크기를 설정하고있다.

// (노 JQuery와 document.ready) onReady 함수 (F) { "완료"=== document.readyState ? F ()의 setTimeout (onReady, 10, F); } onReady (함수 () { [] .forEach.call ( document.querySelectorAll ( "입력 [TYPE = '문자']. AUTORESIZE") registerInput ); }); 기능 registerInput (엘) { el.size = 1; VAR 스타일 el.currentStyle을 = || window.getComputedStyle (엘) borderBox = style.boxSizing === "경계 상자" boxSizing = borderBox ? 에서는 parseInt (style.borderRightWidth 10) + 에서는 parseInt (style.borderLeftWidth 10) : 0; 경우 (엘에서 "onpropertychange") { // IE el.onpropertychange = 조정; } 다른 경우 ( "oninput"엘에서) { el.oninput = 조정; } 맞추다(); 조정 함수 () { // 작은 크기로 재설정 (텍스트가 삭제 한 경우에 대한) el.style.width = ""; // scrollWidth 점점 리플 로우를 유발한다 // 당신을 줄 폭은 픽셀 경우에 어떻게 될지 // 원래 스타일, 적은 모든 상자 크기 조정 VAR newWidth = el.scrollWidth boxSizing +; // 그래서 새로운 폭으로 설정하자! el.style.width = newWidth + "픽셀"; } } * { 글꼴 - 가족 : 산세 리프; } input.autoresize { 폭 : 125px; 최소 폭 : 125px; 최대 폭 : 400 픽셀; } 입력 [타입 = '문자'] { 상자 크기 조정 : 국경 상자; 패딩 : 4 픽셀 8px; 경계 반경 : 4 픽셀; 국경 : 1 픽셀의 고체 #ccc; 마진 - 하단 : 10px; } <레이블> 크기 변경 : <입력 클래스 = "자동 크기"자리 = "이 크기를 조정할 것"유형 = '텍스트'>
<레이블> 크기를 조정하지 않습니다 :
<레이블> 오른쪽에있는 여분의 공간을 가지고 있습니다 : <입력 값 = "123456789"사이즈 = "9"TYPE = "텍스트"/>

나는이도 IE6에서 작동해야한다고 생각하지만, 내 말을하지 않습니다.

사용 사례에 따라, 당신은 다른 이벤트에 기능을 조절 결합해야 할 수도 있습니다. 예를 들면 프로그램 입력의 값을 변경하거나, 없음에서 요소의 스타일의 디스플레이 속성을 변경 (scrollWidth === 0) 블록 또는 인라인 블록 등
10.내가 JS에 관련되지 않은이 문제에 대한 또 다른 해결책을 발견했습니다. HTML에서 나는 그냥 뭔가를 같이 넣어 :

내가 JS에 관련되지 않은이 문제에 대한 또 다른 해결책을 발견했습니다. HTML에서 나는 그냥 뭔가를 같이 넣어 :
```
<div>
  <input class="input" value={someValue} />
  <div class="ghost-input">someValue</div>
</div>
```
유령 입력 폭에 숨겨진 : 필요한 모든 세트 가시성입니다 입력 자체에 100 %. 폭 브라우저 자체에 의해 계산 된 해당 용기의 100 %의 입력이 저울 (동일한 텍스트에 기초하여) 때문에 작동한다.

입력 필드에 약간의 패딩과 테두리를 추가하면 그에 따라 (입력 클래스 또는 사용 CALC를 ()) 귀하의 유령 입력 클래스를 조정해야합니다.

11.나를 위해 작품 플러그인 내 jQuery를 :

나를 위해 작품 플러그인 내 jQuery를 :

용법:

    $('form input[type="text"]').autoFit({

    });

jquery.auto-fit.js의 소스 코드 :

;
(function ($) {
    var methods = {
        init: function (options) {
            var settings = $.extend(true, {}, $.fn.autoFit.defaults, options);
            var $this = $(this);

            $this.keydown(methods.fit);

            methods.fit.call(this, null);

            return $this;
        },

        fit: function (event) {
            var $this = $(this);

            var val = $this.val().replace(' ', '-');
            var fontSize = $this.css('font-size');
            var padding = $this.outerWidth() - $this.width();
            var contentWidth = $('<span style="font-size: ' + fontSize + '; padding: 0 ' + padding / 2 + 'px; display: inline-block; position: absolute; visibility: hidden;">' + val + '</span>').insertAfter($this).outerWidth();

            $this.width((contentWidth + padding) + 'px');

            return $this;
        }
    };

    $.fn.autoFit = function (options) {
        if (typeof options == 'string' && methods[options] && typeof methods[options] === 'function') {
            return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof options === 'object' || !options) {
            // Default to 'init'
            return this.each(function (i, element) {
                methods.init.apply(this, [options]);
            });
        } else {
            $.error('Method ' + options + ' does not exist on jquery.auto-fit.');
            return null;
        }
    };

    $.fn.autoFit.defaults = {};

})(this['jQuery']);

12.입력 요소는 단지 당신이 그 (것)들을 떠 주면 당신이 원하는 일에 대해 할 것 다른 요소에서 다르게 작동합니까 : 왼쪽 (http://jsfiddle.net/hEvYj/5/ 참조). 나는 (즉 상자에 편지 당 폭에 5px 추가) 자바 스크립트와 어떤 방법으로 그것을 계산하지 않고 가능하다 생각하지 않습니다.

입력 요소는 단지 당신이 그 (것)들을 떠 주면 당신이 원하는 일에 대해 할 것 다른 요소에서 다르게 작동합니까 : 왼쪽 (http://jsfiddle.net/hEvYj/5/ 참조). 나는 (즉 상자에 편지 당 폭에 5px 추가) 자바 스크립트와 어떤 방법으로 그것을 계산하지 않고 가능하다 생각하지 않습니다.
13.사용자 nrabinowitz '솔루션은 큰 노력하고 있습니다,하지만 난의 keyup 대신 키 입력 이벤트를 사용합니다. 즉 천천히 사용자 유형의 경우 대기 시간을 줄일 수 있습니다.

사용자 nrabinowitz '솔루션은 큰 노력하고 있습니다,하지만 난의 keyup 대신 키 입력 이벤트를 사용합니다. 즉 천천히 사용자 유형의 경우 대기 시간을 줄일 수 있습니다.
14.여기 nrabinowitz '솔루션의 내 수정입니다. @ 마크가 언급 한대로 비례 글꼴로 완벽 하진 때문에, 크기 속성을 사용하지 않았다. 내 솔루션의 한 장소를 입력 한 후 요소와는 폭 (jQuery를 사용하여) 브라우저에 의해 계산됩니다.

여기 nrabinowitz '솔루션의 내 수정입니다. @ 마크가 언급 한대로 비례 글꼴로 완벽 하진 때문에, 크기 속성을 사용하지 않았다. 내 솔루션의 한 장소를 입력 한 후 요소와는 폭 (jQuery를 사용하여) 브라우저에 의해 계산됩니다.

나는 그것을 테스트하지 않지만, 나는 글꼴 영향을 미치는 모든 CSS 속성이 상속되는 경우에만 작동합니다 가정합니다.

나를 위해 잘 작동 대한 focusOut 이벤트의 변경 폭 입력. 뿐만 아니라 입력 할 때 그러나 당신은 변화 입력의 폭 / 키를 누를 수의 keyup 사용할 수 있습니다.
```
function resizeInput() {

    //Firstly take the content or placeholder if content is missing.
    var content =
        $(this).val().length > 0 ? $(this).val() : $(this).prop("placeholder");

    //Create testing element with same content as input.
    var widthTester = $("<span>"+content+"</span>").hide();

    //Place testing element into DOM after input (so it inherits same formatting as input does).
    widthTester.insertAfter($(this));

    //Set inputs width; you may want to use outerWidth() or innerWidth()
    //depending whether you want to count padding and border or not.
    $(this).css("width",widthTester.width()+"px");

    //Remove the element from the DOM
    widthTester.remove();
 }

 $('.resizing-input').focusout(resizeInput).each(resizeInput);
```

15.우리는 요소가 폭 계산할 수있는 캔버스를 사용 :

우리는 요소가 폭 계산할 수있는 캔버스를 사용 :

function getTextWidth(text, fontSize, fontName) {
  let canvas = document.createElement('canvas');
  let context = canvas.getContext('2d');
  context.font = fontSize + fontName;
  return context.measureText(text).width;
}

그리고 선택한 이벤트에 사용 :

function onChange(e) {
  let width = getTextWidth(this.value, $(this).css('font-size'), 
  $(this).css('font-family'));
  $(this.input).css('width', width);
}

16.의 measureText 솔루션 캔버스 시도

의 measureText 솔루션 캔버스 시도

CSS :

    input{
        min-width:10px!important;
        max-width:99.99%!important;
        transition: width 0.1s;
        border-width:1px;
    }

자바 스크립트 :

function getWidthOfInput(input){
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var text = input.value.length ? input.value : input.placeholder;
    var style = window.getComputedStyle(input);
    ctx.lineWidth = 1;
    ctx.font = style.font;
    var text_width = ctx.measureText(text).width;
    return text_width;
}

function resizable (el, factor) {
    function resize() {
        var width = getWidthOfInput(el);
        el.style.width = width + 'px';
    }
    var e = 'keyup,keypress,focus,blur,change'.split(',');
    for (var i in e){
        el.addEventListener(e[i],resize,false);
    }
    resize();
}

$( "input" ).each( function(i){
    resizable(this);
});

17.I 캔버스를 생성하고 그것의 크기를 계산하는 폭 해결. 그 중요한 입력 값과 동일한 캔버스 폰트의 특징을 공유하는 (가족, 크기, 무게 ...)

I 캔버스를 생성하고 그것의 크기를 계산하는 폭 해결. 그 중요한 입력 값과 동일한 캔버스 폰트의 특징을 공유하는 (가족, 크기, 무게 ...)
```
import calculateTextWidth from "calculate-text-width";

/*
 requires two props "value" and "font"
  - defaultFont: normal 500 14px sans-serif 
 */
const defaultText = 'calculate my width'
const textFont = 'normal 500 14px sans-serif'
const calculatedWidth = calculateTextWidth(defaultText, textFont)
console.log(calculatedWidth) // 114.37890625
```
GitHub의 : https://github.com/ozluy/calculate-text-width CodeSandbox : https://codesandbox.io/s/calculate-text-width-okr46

from https://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 선택에서 "컨텍스트"는 무엇입니까? (1)	2020.10.24
[JQUERY] jQuery로 유튜브 비디오를 중지? (0)	2020.10.24
[JQUERY] 캔의 jQuery .keypress () 더 동시에 하나의 키보다 감지? (0)	2020.10.24
[JQUERY] 내가 jQuery를 개체에서 선택을받을 수있는 방법 (0)	2020.10.24
[JQUERY] jQuery로 최초의 "N"항목을 선택 (0)	2020.10.24

복붙노트

[JQUERY] 자동 스케일링 입력 [TYPE = 텍스트] 값 폭을 위해?

자동 스케일링 입력 [TYPE = 텍스트] 값 폭을 위해?

해결법

1.당신은 입력 내용의 길이와 크기 속성을 설정하여이 쉬운 방법을 수행 할 수 있습니다

2.나는이 작업을 수행하는 몇 가지 방법을 볼 수 있지만 글꼴의 폭을 계산하는 것은 단지 추정입니다, 항상 100 % 정확하지 않다있다.

3.어떤 이유로 다른 솔루션이 작동하지 않는 경우, 당신은 입력 요소 대신의 contentEditable 경간을 사용할 수 있습니다.

4.편집 : 이제 플러그인 공백 문자를 후행와 함께 작동합니다. 그것을 지적 주셔서 감사합니다 @JavaSpyder

5.내가 GitHub의에 jQuery 플러그인이 있습니다 https://github.com/MartinF/jQuery.Autosize.Input

6.좋은 많은 여기에 답이 이미 있습니다. 재미를 위해, 나는 다른 답변과 내 자신의 아이디어를 기반으로, 아래에이 솔루션을 구현했습니다.

7.대신 사업부를 만들고 그 폭을 측정하려고, 나는 그것을 직접 더 정확 캔버스 요소를 사용하여 폭을 측정하는 것이 더 신뢰할 수있는 것 같아요.

8.여기로이 문제를 해결할 수 있습니다 :) http://jsfiddle.net/MqM76/217/

9.불행하게도 크기 속성은 매우 잘 작동하지 않습니다. 여분의 공간이 너무 작은 공간 글꼴 설정 방법에 따라, 때로는있을 것입니다. (예를 확인)

10.내가 JS에 관련되지 않은이 문제에 대한 또 다른 해결책을 발견했습니다. HTML에서 나는 그냥 뭔가를 같이 넣어 :

11.나를 위해 작품 플러그인 내 jQuery를 :

13.사용자 nrabinowitz '솔루션은 큰 노력하고 있습니다,하지만 난의 keyup 대신 키 입력 이벤트를 사용합니다. 즉 천천히 사용자 유형의 경우 대기 시간을 줄일 수 있습니다.

14.여기 nrabinowitz '솔루션의 내 수정입니다. @ 마크가 언급 한대로 비례 글꼴로 완벽 하진 때문에, 크기 속성을 사용하지 않았다. 내 솔루션의 한 장소를 입력 한 후 요소와는 폭 (jQuery를 사용하여) 브라우저에 의해 계산됩니다.

15.우리는 요소가 폭 계산할 수있는 캔버스를 사용 :

16.의 measureText 솔루션 캔버스 시도

17.I 캔버스를 생성하고 그것의 크기를 계산하는 폭 해결. 그 중요한 입력 값과 동일한 캔버스 폰트의 특징을 공유하는 (가족, 크기, 무게 ...)

'JQUERY' 카테고리의 다른 글

티스토리툴바