입력 [type = text]을 값의 너비로 자동 확장 하시겠습니까?

Question 1

<input type="text">의 너비를 실제 값 의 너비로 조정하는 방법이 있습니까?

input {
  display: block;
  margin: 20px;
  width: auto;
}

<input type="text" value="I've had enough of these damn snakes, on this damn plane!" />

<input type="text" value="me too" />

스 니펫 확장

Question 2

size속성을 입력 내용의 길이 로 설정하여 쉽게 수행 할 수 있습니다 .

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를 사용하여 텍스트의 픽셀 크기를 계산하는 이 관련 답변에서 설명한 것과 같은 기술을 사용할 수 있습니다 .

Question 3

간단하지만 완벽한 픽셀 솔루션

이 작업을 수행하는 여러 가지 방법을 보았지만 글꼴 너비를 계산하는 것이 항상 100 % 정확하지는 않습니다. 단지 추정 일뿐입니다.

측정 할 숨겨진 자리 표시자를 사용하여 입력 너비를 조정하는 완벽한 픽셀 방법을 만들었습니다.

jQuery (권장)

$(function(){
  $('#hide').text($('#txt').val());
  $('#txt').width($('#hide').width());
}).on('input', function () {
  $('#hide').text($('#txt').val());
  $('#txt').width($('#hide').width());
});

body,
#txt,
#hide{
  font:inherit;
  margin:0;
  padding:0;
}
#txt{
  border:none;
  color:#888;
  min-width:10px;
}
#hide{
  display:none;
  white-space:pre;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Lorem ipsum 
  <span id="hide"></span><input id="txt" type="text" value="type here ...">
  egestas arcu.
</p>

스 니펫 확장

순수 자바 스크립트

jQuery가 숨겨진 요소의 너비를 계산하는 방법을 결정할 수 없었기 때문에이 솔루션을 수용하려면 CSS를 약간 조정해야했습니다.

var hide = document.getElementById('hide');
var txt = document.getElementById('txt');
resize();
txt.addEventListener("input", resize);

function resize() {
  hide.textContent = txt.value;
  txt.style.width = hide.offsetWidth + "px";
}

body,
#txt,
#hide {
  font: inherit;
  margin: 0;
  padding: 0;
}

#txt {
  border: none;
  color: #888;
  min-width: 10px;
}

#hide {
  position: absolute;
  height: 0;
  overflow: hidden;
  white-space: pre;
}

<p>Lorem ipsum
  <span id="hide"></span><input id="txt" type="text" value="type here ..."> egestas arcu.
</p>

스 니펫 확장

Question 4

어떤 이유로 다른 솔루션이 작동하지 않는 경우 입력 요소 대신 contenteditable-span을 사용할 수 있습니다.

<span contenteditable="true">dummy text</span>

이것은 해킹에 가깝고 사용자가 줄 바꿈, 링크 및 기타 HTML을 입력 (및 붙여 넣기) 할 수 있도록하는 것과 같이 완전히 삭제되지 않은 HTML 입력을 허용하는 심각한 단점이 있습니다.

따라서 입력을 매우 신중하게 삭제하지 않는 한이 솔루션을 사용해서는 안됩니다 .

업데이트 : 아래 의 DreamTeK 솔루션 을 사용하고 싶을 것입니다 .

Question 5

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

대부분의 다른 답변이 내가 필요한 것과 일치하지 않았거나 단순히 전혀 작동하지 않았기 때문에 Adrian B의 답변을 적절한 jQuery 플러그인으로 수정하여 CSS 또는 HTML을 변경하지 않고도 입력의 픽셀 완벽한 크기 조정이 가능합니다.

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

용법:$("input").autoresize({padding: 20, minWidth: 20, maxWidth: 300});

플러그인:

//JQuery plugin:
$.fn.textWidth = function(_text, _font){//get width of text with font.  usage: $("div").textWidth();
        var fakeEl = $('<span>').hide().appendTo(document.body).text(_text || this.val() || this.text()).css({font: _font || this.css('font'), whiteSpace: "pre"}),
            width = fakeEl.width();
        fakeEl.remove();
        return width;
    };

$.fn.autoresize = function(options){//resizes elements based on content size.  usage: $('input').autoresize({padding:10,minWidth:0,maxWidth:100});
  options = $.extend({padding:10,minWidth:0,maxWidth:10000}, options||{});
  $(this).on('input', function() {
    $(this).css('width', Math.min(options.maxWidth,Math.max(options.minWidth,$(this).textWidth() + options.padding)));
  }).trigger('input');
  return this;
}



//have <input> resize automatically
$("input").autoresize({padding:20,minWidth:40,maxWidth:300});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="i magically resize">
<br/><br/>
called with:
$("input").autoresize({padding: 20, minWidth: 40, maxWidth: 300});

스 니펫 확장

Question 6

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

입력 값을 미러링하고 너비를 계산하여 입력 너비를 설정하는 데 사용합니다.

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

사용 방법의 예 (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를 사용하여 최소 / 최대 너비를 설정하고 멋진 효과를 원한다면 너비에 전환을 사용하십시오.

입력 요소의 data-autosize-input 속성에 대한 json 표기법의 값으로 끝까지의 공간 / 거리를 지정할 수 있습니다.

물론 jQuery를 사용하여 초기화 할 수도 있습니다.

$("selector").autosizeInput();

Question 7

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

<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;
}

여기 에 바이올린이 있습니다. 나는 이것이 깨끗한 해결책을 찾는 다른 사람들에게 도움이되기를 바랍니다.

Question 8

div를 만들고 너비를 측정하는 대신 더 정확한 캔버스 요소를 사용하여 직접 너비를 측정하는 것이 더 신뢰할 수 있다고 생각합니다.

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";

Question 9

다음과 같이이 문제를 해결할 수 있습니다. :) 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');

Question 10

불행히도 size속성은 잘 작동하지 않습니다. 글꼴 설정 방법에 따라 여분의 공간과 너무 적은 공간이있을 수 있습니다. (예제 확인)

이것이 잘 작동하도록하려면 입력의 변경 사항을 확인한 다음 크기를 조정하십시오. 당신은 아마 그것을 입력의scrollWidth . 상자 크기도 고려해야합니다.

다음 예제에서는 초기 너비 (CSS로 수동 설정)보다 큰 값 size을 갖지 않도록 입력의을 1로 scrollWidth설정합니다.

// (no-jquery document.ready)
function onReady(f) {
    "complete" === document.readyState
        ? f() : setTimeout(onReady, 10, f);
}

onReady(function() {
    [].forEach.call(
        document.querySelectorAll("input[type='text'].autoresize"),
        registerInput
    );
});
function registerInput(el) {
    el.size = 1;
    var style = el.currentStyle || window.getComputedStyle(el),
        borderBox = style.boxSizing === "border-box",
        boxSizing = borderBox
            ? parseInt(style.borderRightWidth, 10) +
                parseInt(style.borderLeftWidth, 10)
            : 0;
    if ("onpropertychange" in el) {
         // IE
         el.onpropertychange = adjust;
    } else if ("oninput" in el) {
         el.oninput = adjust;
    }
    adjust();

    function adjust() {

        // reset to smaller size (for if text deleted) 
        el.style.width = "";

        // getting the scrollWidth should trigger a reflow
        // and give you what the width would be in px if 
        // original style, less any box-sizing
        var newWidth = el.scrollWidth + boxSizing;

        // so let's set this to the new width!
        el.style.width = newWidth + "px";
    }
}

* {
  font-family: sans-serif;
}
input.autoresize {
  width: 125px;
  min-width: 125px;
  max-width: 400px;
}
input[type='text'] {
  box-sizing: border-box;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

<label> 
  Resizes:
  <input class="autoresize" placeholder="this will resize" type='text'>
</label>
<br/>
<label>
  Doesn't resize:
<input placeholder="this will not" type='text'>
</label>
<br/>
<label>
  Has extra space to right:
  <input value="123456789" size="9" type="text"/>
</label>

스 니펫 확장

나는 이것이 IE6에서도 작동한다고 생각하지만 내 말을 받아들이지 마십시오.

사용 사례에 따라 adjust 함수를 다른 이벤트에 바인딩해야 할 수 있습니다. 예를 들어 입력 값을 프로그래밍 방식으로 변경하거나 요소의 스타일 display속성을 none(where scrollWidth === 0)에서 block또는 inline-block로 변경하는 등의 작업이 있습니다.

Question 11

JS와 관련이없는이 문제에 대한 또 다른 해결책을 찾았습니다. HTML에서는 다음과 같이 입력합니다.

<div>
  <input class="input" value={someValue} />
  <div class="ghost-input">someValue</div>
</div>

가시성을 설정하기 만하면됩니다 : 고스트 입력시 숨김, 입력 자체에서 너비 : 100 %. 입력이 컨테이너의 100 %로 조정되기 때문에 작동하며 너비는 브라우저 자체에 의해 계산됩니다 (동일한 텍스트를 기반으로 함).

입력 필드에 패딩과 테두리를 추가하면 그에 따라 고스트 입력 클래스를 조정해야합니다 (또는 입력 클래스에서 calc () 사용).

Question 12

내 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']);

Question 13

입력 요소는 다른 요소와 다르게 작동하므로 사용자가 제공하면 원하는대로 수행 할 수 있습니다 float: left( http://jsfiddle.net/hEvYj/5/ 참조 ). JavaScript로 어떤 식 으로든 계산하지 않고서는 가능하지 않다고 생각합니다 (예 : 상자의 글자 당 너비에 5px 추가).

Question 14

사용자 nrabinowitz 의 솔루션 이 훌륭하게 작동하지만 keypress대신 이벤트를 사용합니다 keyup. 이렇게하면 사용자가 천천히 입력하는 경우 지연 시간이 줄어 듭니다.

Question 15

다음은 nrabinowitz 의 솔루션을 수정 한 것입니다 . @Mark가 지적했듯이 비례 글꼴에는 완벽하지 않기 때문에 size 속성을 사용하지 않았습니다 . 내 솔루션은 입력 뒤에 요소를 배치하고 브라우저에서 너비를 계산합니다 (jQuery 사용).

테스트하지는 않지만 글꼴에 영향을 미치는 모든 CSS 속성이 상속 된 경우에만 작동한다고 생각합니다.

포커스 아웃 이벤트에서 입력 너비가 변경되어 더 잘 작동합니다. 그러나 입력 할 때도 입력 폭을 변경하기 위해 keyup / keypress 를 사용할 수 있습니다 .

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);

Question 16

캔버스를 사용하여 요소 너비를 계산할 수 있습니다.

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);
}

Question 17

캔버스 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);
});

Question 18

캔버스를 만들고 크기를 계산하는 너비를 해결했습니다. 입력 값과 캔버스가 동일한 글꼴 기능 (패밀리, 크기, 무게 ...)을 공유하는 것이 중요합니다.

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