programing tip

입력 필드의 너비를 입력으로 조정

itbloger 2020. 6. 17. 19:01
반응형

입력 필드의 너비를 입력으로 조정

<html>
  <head>
  </head>
  <body>
    <input type="text" value="1" style="min-width:1px;" />
  </body>
</html>

이것은 내 코드이며 작동하지 않습니다. HTML, JavaScript, PHP 또는 CSS에 최소 너비를 설정하는 다른 방법이 있습니까?

입력 필드가 내용 주위를 유동하도록 동적으로 너비가 변경되는 텍스트 입력 필드를 원합니다. 모든 입력에는 내장 패딩 2em이 있습니다. 이것이 문제이며 두 번째 문제는 min-width입력에서 전혀 작동하지 않는다는 것입니다.

전체 프로그램이 지저분한 것보다 필요한 너비를 더 많이 설정하면 필요한 경우에만 1px의 너비가 필요합니다.

텍스트 상자의 내용을 기반으로 텍스트 상자의 너비에 스타일이 동적으로 적용되는 것으로 예상됩니다. 그렇다면 텍스트 상자 내용을 변경하여 실행하려면 js가 필요 합니다 .

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

참고 :이 솔루션은 모든 문자가 정확히 8px넓은 경우에만 작동합니다 .

최신 브라우저 버전에서는 CSS 단위 ch도 사용할 수 있습니다. 내가 이해하기에, 그것은 글꼴에 독립적 인 단위이며, 주어진 글꼴 1ch의 문자 너비 0(0) 와 같습니다 .

따라서 다음과 같은 간단한 것이 크기 조정 기능으로 사용될 수 있습니다.

var input = document.querySelector('input'); // get the input element
input.addEventListener('input', resizeInput); // bind the "resizeInput" callback on "input" event
resizeInput.call(input); // immediately call the function

function resizeInput() {
  this.style.width = this.value.length + "ch";
}
input{ font-size:1.3em; padding:.5em; }
<input>

이 예에서는 "elem"의 크기를 +2 자의 추가 길이로 조정합니다.

현재 입력의 너비를 계산하려면 임시 span요소에 입력하고 DOM에 해당 항목을 첨부하고 scrollWidth속성을 사용하여 계산 된 너비 (픽셀)를 얻은 다음 span다시 제거해야 합니다. 물론 동일한 글꼴 모음, 글꼴 크기 등 input이 span요소 뿐만 아니라 요소 에도 사용되는지 확인해야합니다 . 그러므로 나는 그들에게 같은 수업을 배정했다.

입력 문자가 아직 input에 추가되지 않았기 때문에 함수를 keyup이벤트에 첨부 했으므로 너비가 잘못되었습니다. 불행히도, 입력 필드의 스크롤을 제거하는 방법을 모르겠습니다 (필드 끝에 문자를 추가 할 때). 문자가 추가되고 호출 되기 전에 표시되므로 스크롤 됩니다. 그리고 말했듯이, 다른 방법으로는이 작업을 수행 할 수 없습니다 . 눌린 문자가 삽입 되기 전에 입력 필드의 값을 가지기 때문 입니다. 나중에이 문제를 해결하려고합니다.keypressvalueadjustWidthOfInput()

BTW, 나는 이것을 Firefox (3.6.8)에서만 테스트했지만 요점을 알 수 있기를 바랍니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Get/set width of &lt;input&gt;</title>
    <style>
      body {
        background: #666;
      }

      .input-element {
        border: 0;
        padding: 2px;
        background: #fff;
        font: 12pt sans-serif;
      }

      .tmp-element {
        visibility: hidden;
        white-space: pre;
      }
    </style>
  </head>
  <body>
    <input id="theInput" type="text" class="input-element" value="1">
    <script>
      var inputEl = document.getElementById("theInput");

      function getWidthOfInput() {
        var tmp = document.createElement("span");
        tmp.className = "input-element tmp-element";
        tmp.innerHTML = inputEl.value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
        document.body.appendChild(tmp);
        var theWidth = tmp.getBoundingClientRect().width;
        document.body.removeChild(tmp);
        return theWidth;
      }

      function adjustWidthOfInput() {
        inputEl.style.width = getWidthOfInput() + "px";
      }

      adjustWidthOfInput();
      inputEl.onkeyup = adjustWidthOfInput;
    </script>
  </body>
</html>

다음은 Lyth의 답변을 고려한 수정 사항입니다.

  • 삭제
  • 초기화
  • 자리 표시 자

또한 모든 입력 필드를 허용합니다! 그것을 실제로 보려면 : http://jsfiddle.net/4Qsa8/

스크립트:

$(document).ready(function () {
    var $inputs = $('.resizing-input');

    // Resize based on text if text.length > 0
    // Otherwise resize based on the placeholder
    function resizeForText(text) {
        var $this = $(this);
        if (!text.trim()) {
            text = $this.attr('placeholder').trim();
        }
        var $span = $this.parent().find('span');
        $span.text(text);
        var $inputSize = $span.width();
        $this.css("width", $inputSize);
    }

    $inputs.find('input').keypress(function (e) {
        if (e.which && e.charCode) {
            var c = String.fromCharCode(e.keyCode | e.charCode);
            var $this = $(this);
            resizeForText.call($this, $this.val() + c);
        }
    });

    // Backspace event only fires for keyup
    $inputs.find('input').keyup(function (e) { 
        if (e.keyCode === 8 || e.keyCode === 46) {
            resizeForText.call($(this), $(this).val());
        }
    });

    $inputs.find('input').each(function () {
        var $this = $(this);
        resizeForText.call($this, $this.val())
    });
});

스타일: 

.resizing-input input, .resizing-input span {
    font-size: 12px;
    font-family: Sans-serif;
    white-space: pre;
    padding: 5px;
}

HTML :

<div class="resizing-input">
    <input type="text" placeholder="placeholder"/>
    <span  style="display:none"></span>
</div>


$(document).ready(function() {
  var $inputs = $('.resizing-input');

  // Resize based on text if text.length > 0
  // Otherwise resize based on the placeholder
  function resizeForText(text) {
    var $this = $(this);
    if (!text.trim()) {
      text = $this.attr('placeholder').trim();
    }
    var $span = $this.parent().find('span');
    $span.text(text);
    var $inputSize = $span.width();
    $this.css("width", $inputSize);
  }

  $inputs.find('input').keypress(function(e) {
    if (e.which && e.charCode) {
      var c = String.fromCharCode(e.keyCode | e.charCode);
      var $this = $(this);
      resizeForText.call($this, $this.val() + c);
    }
  });

  // Backspace event only fires for keyup
  $inputs.find('input').keyup(function(e) {
    if (e.keyCode === 8 || e.keyCode === 46) {
      resizeForText.call($(this), $(this).val());
    }
  });

  $inputs.find('input').each(function() {
    var $this = $(this);
    resizeForText.call($this, $this.val())
  });
});
.resizing-input input,
.resizing-input span {
  font-size: 12px;
  font-family: Sans-serif;
  white-space: pre;
  padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="resizing-input">
  First:
  <input type="text" placeholder="placeholder" />
  <span style="display:none"></span>
</div>
<br>

NICER LOOK & FEEL을 위해

눌러 진 문자를 얻으려면 jQuery keypress () 이벤트를 String.fromCharCode (e.which)와 함께 사용해야합니다. 따라서 너비 를 계산할 수 있습니다 . 왜? 그것이 훨씬 더 섹시 해 보일 것이기 때문에 :)

다음은 keyup 이벤트를 사용하는 솔루션과 비교할 때 좋은 동작을 일으키는 jsfiddle입니다 : http://jsfiddle.net/G4FKW/3/

아래는 요소 의 input이벤트 를 수신 <input>하고 span형제가 요소 를 측정하기 위해 동일한 텍스트 값을 갖도록 설정 하는 바닐라 JS입니다 .

document.querySelector('input').addEventListener('input', onInput)

function onInput(){
    var spanElm = this.nextElementSibling;
    spanElm.textContent = this.value; // the hidden span takes the value of the input; 
    this.style.width = spanElm.offsetWidth + 'px'; // apply width of the span to the input
};
/* it's important the input and its span have same styling */
input, .measure {
    padding: 5px;
    font-size: 2.3rem;
    font-family: Sans-serif;
    white-space: pre; /* white-spaces will work effectively */
}

.measure{  
  position: absolute;
  left: -9999px;
  top: -9999px;
}
<input type="text" />
<span class='measure'></span>

여기에 솔루션입니다 고정 폭 글꼴없이 , 필요한 자바 스크립트의 아주 작은 조각 코드는 , 계산 된 스타일을 계산할 필요가 없습니다 , 그리고 심지어 IME 지원 , 지원은 RTL 텍스트를 .

// copy the text from input to the span
    $(function () {
      $('.input').on('input', function () { $('.text').text($('.input').val()); });
    });
    * {
      box-sizing: border-box;
    }
    
    .container {
      display: inline-block;
      position: relative;
    }
    
    .input,
    .text {
      margin: 0;
      padding: 2px 10px;
      font-size: 24px;
      line-height: 32px;
      border: 1px solid #ccc;
      box-radius: 3px;
      height: 36px;
      font: 20px/20px sans-serif;
      /* font: they should use same font; */
    }

    .text {
      padding-right: 20px;
      display: inline-block;
      visibility: hidden;
      white-space: pre;
    }
    
    .input {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
    }
    
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>

<div class="container">
  <span class="text">
    some text
  </span>
  <input class="input" value="some text" />
</div>

를 사용하여 span.text텍스트 너비에 맞추고 입력을 position: absolute컨테이너 와 동일한 크기로 설정하십시오 . 입력 할 때 span마다 입력 값을 복사 하십시오 (이 코드를 바닐라 js로 쉽게 변경할 수 있음). 따라서 입력은 내용의 크기에 딱 맞습니다.

다음은 DIV 및 'contenteditable'특성을 사용하여이를 해결하는 대체 방법입니다.

HTML :

<div contenteditable = "true" class = "fluidInput" data-placeholder = ""></div>

CSS : (DIV에 약간의 차원을 부여하고보다 쉽게 ​​볼 수 있도록)

.fluidInput {

    display         : inline-block;
    vertical-align  : top;

    min-width       : 1em;
    height          : 1.5em;

    font-family     : Arial, Helvetica, sans-serif;
    font-size       : 0.8em;
    line-height     : 1.5em;

    padding         : 0px 2px 0px 2px;
    border          : 1px solid #aaa;
    cursor          : text;
}


.fluidInput * {

    display         : inline;

}


.fluidInput br  {

    display         : none;

}


.fluidInput:empty:before {

    content         : attr(data-placeholder);
    color           : #ccc;

}

참고 : 제출하려는 FORM 요소 내에서이를 사용하려는 경우 , DIV 의 '값'( .innerHTML또는 .html()각각)을 구문 분석 할 수 있도록 제출 이벤트를 포착하기 위해 Javascript / jQuery를 사용해야 합니다.

size 속성도 사용하여 입력 너비를 설정할 수 있습니다 . 입력의 크기에 따라 문자의 너비가 결정됩니다.

입력은 주요 이벤트를 수신하여 크기를 동적으로 조정할 수 있습니다.

예를 들어

$("input[type='text']").bind('keyup', function () {
    $(this).attr("size", $(this).val().length );
});

여기에 JsFiddle

당신은 같은 것을 할 수있는 이

// HTML
<input id="input" type="text" style="width:3px" />
// jQuery
$(function(){
  $('#input').keyup(function(){
    $('<span id="width">').append( $(this).val() ).appendTo('body');
    $(this).width( $('#width').width() + 2 );
    $('#width').remove();
  });
});

​

​

이것은 Angular 전용 답변이지만 저에게 효과적이며 단순성과 사용 편의성 측면에서 매우 만족 스럽습니다.

<input [style.width.ch]="value.length" [(ngModel)]="value" />

Jani 's answer 의 문자 단위를 통해 자동으로 업데이트됩니다 .

다음은 캔버스와 글꼴 크기 / 패밀리를 사용하여 입력 요소의 크기 조정을 처리하여 렌더링 할 때 실제 문자열 길이를 결정하는 일반 JS 및 jQuery 플러그인입니다. (> IE9, chrome, safari, firefox, opera 및 canvas 요소를 구현 한 대부분의 다른 주요 브라우저에서만 작동합니다).

PlainJS :

function autoSize(input, o) {
    o || (o = {});
    o.on || (o.on = 'keyup');

    var canvas = document.createElement('canvas');
    canvas.setAttribute('style', 'position: absolute; left: -9999px');
    document.body.appendChild(canvas);

    var ctx = canvas.getContext('2d');

    input.addEventListener(o.on, function () {
        ctx.font = getComputedStyle(this,null).getPropertyValue('font');
        this.style.width = ctx.measureText(this.value + '  ').width + 'px';
    });
}

//Usage
autoSize(document.getElementById('my-input'));

jQuery 플러그인 :

$.fn.autoSize = function(o) {
  o = $.extend({}, {
    on: 'keyup'
  }, o);

  var $canvas = $('<canvas/>').css({position: 'absolute', left: -9999});
  $('body').append($canvas);

  var ctx = $canvas[0].getContext('2d');

  return this.on(o.on, function(){
    var $this = $(this);
    ctx.font = $this.css('font');
    $this.width(ctx.measureText($this.val()).width + 'px');
  })
}

//Usage:
$('#my-input').autoSize();

참고 : 텍스트 변환, 줄 간격 및 문자 간격 및 기타 텍스트 크기 변경 속성은 처리하지 않습니다. 텍스트 변환 속성 세트를 처리하고 해당 속성과 일치하도록 텍스트 값을 조정합니다. 다른 것들은 아마도 매우 직설적 일 것입니다. 이것이 약간의 견인력을 얻기 시작하면 구현할 것입니다 ...

다른 답변 위에 추가하기 만하면됩니다.

요즘 일부 브라우저에서 입력 필드에 scrollWidth가 있음을 알았습니다. 다음을 의미합니다.

this.style.width = this.scrollWidth + 'px';

잘 작동합니다. 크롬, 파이어 폭스 및 사파리에서 테스트되었습니다.

삭제 지원을 위해 먼저 '= 0'을 추가 한 다음 다시 조정할 수 있습니다. 

this.style.width = 0; this.style.width = this.scrollWidth + 'px';

글꼴이 고정 폭일 때 멋진 크기 조정이 가능하므로 단위를 input사용하여 요소의 크기를 완벽하게 조정할 수 있습니다 ch.

또한이 방법에서 우리는 단지 업데이트하여 필드의 폭을 업데이트 할 수 있습니다 CSS 변수 ( 사용자 지정 속성 )에 input이벤트를 우리는 또한 이미 사전 작성 입력을 처리해야 DOMContentLoaded이벤트

코드 펜 데모

마크 업

<input type="text" value="space mono font" class="selfadapt" />

CSS

:root { --size: 0; }

.selfadapt {
   padding: 5px;
   min-width: 10ch;
   font-family: "space mono";
   font-size: 1.5rem;
   width: calc(var(--size) * 1ch);
}

우리는 루트 변수로 설정합니다 --size: 0:이 변수는 입력 길이를 포함 할 것이고 표현식 1ch내부에 곱해질 것 calc()입니다. 기본적으로 우리는 최소 너비를 설정할 수도 있습니다.10ch

Javascript 부분은 삽입 된 값의 길이를 읽고 변수를 업데이트합니다 --size.

JS

let input = document.querySelector('.selfadapt');
let root  = document.documentElement.style;

/* on input event auto resize the field */
input.addEventListener('input', function() {
   root.setProperty('--size', this.value.length );
});

/* resize the field if it is pre-populated */
document.addEventListener("DOMContentLoaded", function() {
   root.setProperty('--size', input.value.length);
});

물론 이런 여전히 고정 폭 글꼴을 사용하지 않는,하지만 경우에 당신은 변경해야합니다 경우에도 작동 calc()곱셈에 의해 식 --size(이 엄격에 의존의 다른 값으로 변수 font-family와 font-size는 다른) 1ch.

내장 된 ng 스타일 지시문을 사용하여 각도에서 더 간단하게 수행 할 수 있습니다 .

귀하의 HTML에서 :

  <input ng-style="inputStyle(testdata)" ng-model="testdata" />

컨트롤러에서 :

 $scope.testdata = "whatever";

 $scope.inputStyle = function(str) {
    var charWidth = 7;
    return  {"width": (str.length +1) * charWidth + "px" };
    };

당신의 CSS에서 :

input { font-family:monospace; font-size:12px; }

글꼴 너비에 맞게 charWidth를 조정하십시오. 글꼴 크기가 12px 인 경우 7 인 것 같습니다.

부트 스트랩을 사용하면 매우 쉽게 수행 할 수 있습니다.

<div contenteditable="true" class="form-control" style="display: inline"></div>

양식을 제출하기 전에 div의 내용을 가져 와서 숨겨진 입력에 넣어야합니다.

최소 너비 CSS 속성을 잘못 해석한다고 생각합니다 . 최소 너비는 일반적으로 다음과 같이 유체 레이아웃에서 최소 DOM 너비를 정의하는 데 사용됩니다.

input {
  width: 30%;
  min-width: 200px;
}

입력 요소를 최소 너비 200 픽셀로 설정합니다. 이 문맥에서 "px"는 "pixels"를 나타냅니다.

사용자가 제출할 때 입력 필드에 하나 이상의 문자 가 포함되어 있는지 확인하려는 경우 JavaScript 및 PHP를 사용하여 양식 유효성 검사를 수행해야합니다. 그것이 실제로 당신이하려는 일이라면,이 답변을 편집하고 최선을 다해 도와 드리겠습니다.

나는 Lyth의 대답을 정말로 좋아 했지만 실제로 그것을 원했습니다.

  1. 백 스페이스 처리 및 삭제
  2. 인접한 태그를 수동으로 추가하지 않아도됩니다.
  3. 최소 너비를 적용하십시오.
  4. 특정 클래스의 요소에 자동으로 적용

나는 그의 JSFiddle 적응과 함께했다 이 . 이 바이올린에없는 개선 사항은 jQuery CSS Parser 와 같은 것을 사용 하여 실제로 input.textbox-autosize 규칙에서 초기 너비를 읽고 minWidth로 사용하는 것입니다. 맞습니다. 간단히에 대한 속성을 사용하고 있습니다. 컴팩트 데모를 만들지 만 이상적이지는 않습니다. 각 입력에 추가 속성이 필요하므로 JavaScript에서 minWidth를 100으로 지정하고 싶을 수도 있습니다.

HTML :

<div id='applicationHost'>
<div>Name:   <input class='textbox-autosize' data-min-width='100' type="text" /></div>
<div>Email:  <input class='textbox-autosize' data-min-width='100' type="email" /></div>
<div>Points: <input class='textbox-autosize' data-min-width='100' type="number" /></div>
</div>

CSS :

#applicationHost {
    font-family: courier;
    white-space: pre;
}

input.textbox-autosize, span.invisible-autosize-helper {
    padding:0;
    font-size:12px;
    font-family:Sans-serif; 
    white-space:pre;
}
input.textbox-autosize {
    width: 100px; /* Initial width of textboxes */
}

/*
In order for the measurements to work out, your input and the invisible
span need to have the same styling.
*/

자바 스크립트 :

$('#applicationHost').on('keyup', '.textbox-autosize', function(e) {
    // Add an arbitary buffer of 15 pixels.
    var whitespaceBuffer = 15;
    var je = $(this);
    var minWidth = parseInt(je.attr('data-min-width'));
    var newVal = je.val();
    var sizingSpanClass = 'invisible-autosize-helper';
    var $span = je.siblings('span.' + sizingSpanClass).first();
    // If this element hasn't been created yet, we'll create it now.
    if ($span.length === 0) {
        $span = $('<span/>', {
            'class': sizingSpanClass,
            'style': 'display: none;'
        });
        je.parent().append($span);
    }
    $span = je.siblings('span').first();
    $span.text(newVal) ; // the hidden span takes 
    // the value of the input
    $inputSize = $span.width();
    $inputSize += whitespaceBuffer;
    if($inputSize > minWidth)
        je.css("width", $inputSize) ; // apply width of the span to the input
    else
        je.css("width", minWidth) ; // Ensure we're at the min width
});

이 답변은 브라우저에서 사용 가능한 텍스트 너비를 검색하는 가장 정확한 방법 중 하나를 제공하며 허용되는 답변보다 더 정확합니다. 캔버스 html5 요소를 사용하므로 다른 답변과 달리 요소를 DOM에 추가하지 않으므로 DOM에 요소를 과도하게 추가하여 발생하는 리플 로우 문제를 피할 수 있습니다.

텍스트 너비와 관련하여 여기 에서 Canvas 요소에 대해 자세히 알아보십시오 .

참고 : MDN 에 따르면 getPropertyValue()글꼴과 같은 방법 의 속기 버전을 신뢰할 수 없습니다. 호환성을 향상시키기 위해 값을 개별적으로 얻는 것이 좋습니다. 나는 여기에 속도를 위해서만 사용했습니다.

/**
 * returns the width of child text of any DOM node as a float
 */
function getTextWidth(el) {
  // uses a cached canvas if available
  var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
  var context = canvas.getContext("2d");
  // get the full font style property
  var font = window.getComputedStyle(el, null).getPropertyValue('font');
  var text = el.value;
  // set the font attr for the canvas text
  context.font = font;
  var textMeasurement = context.measureText(text);
  return textMeasurement.width;
}

var input = document.getElementById('myInput');
// listen for any input on the input field
input.addEventListener('input', function(e) {
  var width = Math.floor(getTextWidth(e.target));
  // add 10 px to pad the input.
  var widthInPx = (width + 10) + "px";
  e.target.style.width = widthInPx;
}, false);
#myInput {
  font: normal normal 400 normal 18px / normal Roboto, sans-serif;
  min-width: 40px;
}
<input id="myInput" />

나는 그것을하는 방법을 알아내는 데 시간을 보냅니다.
실제로 내가 찾은 가장 간단한 방법은 입력 값을 입력 바로 앞의 스팬으로 이동하여 입력 1 기호 너비를 유지하는 것입니다. 나는 그것이 당신의 초기 요구에 맞는지 확신 할 수는 없지만.
어쩌면 추가 코드 일 수도 있지만 반응 + 플럭스 기반 응용 프로그램에서는 매우 자연스러운 솔루션입니다.

Michael의 답변을 바탕으로 jQuery를 사용하여 나만의 버전을 만들었습니다. 나는 그것이 대부분의 대답의 더 깨끗하고 짧은 버전이라고 생각하며 일을 끝내는 것처럼 보입니다.

나는 span을 사용하여 입력 텍스트를 작성한 다음 너비를 가져 와서 대부분의 사람들과 같은 일을하고 있습니다. 그런 다음 작업 을 호출 할 때 너비를 설정 keyup하고 blur있습니다.

작동하는 코드 펜 은 다음과 같습니다 . 이 코드 펜은 이것이 여러 입력 필드와 함께 사용되는 방법을 보여줍니다.

HTML 구조 :

<input type="text" class="plain-field" placeholder="Full Name">
<span style="display: none;"></span>

jQuery :

function resizeInputs($text) {
    var text = $text.val().replace(/\s+/g, ' '),
        placeholder = $text.attr('placeholder'),
        span = $text.next('span');
        span.text(placeholder);
    var width = span.width();

    if(text !== '') {
        span.text(text);
    var width = span.width();
    }

    $text.css('width', width + 5);
};

위의 함수는 입력 값을 가져오고 추가 공백을 자르고 텍스트를 범위로 설정하여 너비를 얻습니다. 텍스트가 없으면 대신 자리 표시자를 가져와 스팬에 입력합니다. 텍스트가 범위에 입력되면 입력 너비를 설정합니다. + 5폭에 입력이 에지 브라우저의 작은 비트 차단됩니다 때문에이없는 것입니다.

$('.plain-field').each(function() {
    var $text = $(this);
    resizeInputs($text);
});

$('.plain-field').on('keyup blur', function() {
    var $text = $(this);
    resizeInputs($text);
});

$('.plain-field').on('blur', function() {
    var $text = $(this).val().replace(/\s+/g, ' ');
    $(this).val($text);
});

이것이 개선 될 수 있다면 이것이 내가 얻을 수있는 가장 깨끗한 해결책이므로 알려주십시오.

더 나은 것입니다 onvalue:

<input id="txt" type="text" onvalue="this.style.width = ((this.value.length + 1) * 8) + 'px';">

붙여 넣기, 끌어서 놓기 등도 포함됩니다.

왜 CSS 만 사용하지 않습니까? 

<div id="wrapper">
  <input onkeyup="keyup(event)">
  <div id="ghost"></div>
</div>


function keyup(e) {
	document.getElementById('ghost').innerText = e.target.value;
}
#wrapper {
  position: relative;
  min-width: 30px;
  display: inline-block;
}

input {
  position: absolute;
  left:0;
  right:0;
  border:1px solid blue;
  width: 100%;
}

#ghost {
  color: transparent;
}
<div id="wrapper">
  <input onkeyup="keyup(event)">
  <div id="ghost"></div>
</div>

wrapper {
  position: relative;
  min-width: 30px;
  border: 1px solid red;
  display: inline-block;
}

input {
  position: absolute;
  left:0;
  right:0;
  width: 100%;
}

#ghost {
  color: transparent;
}

이 코드는 @Iain Todd에 의해 소개되었으며 공유해야한다고 생각했습니다.

방탄, 일반적인 방법은 다음과 같습니다.

  1. 측정 된 요소 의 모든 가능한 스타일 을 고려하십시오input
  2. HTML 을 수정하지 않고 모든 입력에 측정을 적용 하거나

코드 펜 데모

var getInputValueWidth = (function(){
  // https://stackoverflow.com/a/49982135/104380
  function copyNodeStyle(sourceNode, targetNode) {
    var computedStyle = window.getComputedStyle(sourceNode);
    Array.from(computedStyle).forEach(key => targetNode.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key)))
  }
  
  function createInputMeassureElm( inputelm ){
    // create a dummy input element for measurements
    var meassureElm = document.createElement('span');
    // copy the read input's styles to the dummy input
    copyNodeStyle(inputelm, meassureElm);
    
    // set hard-coded styles needed for propper meassuring 
    meassureElm.style.width = 'auto';
    meassureElm.style.position = 'absolute';
    meassureElm.style.left = '-9999px';
    meassureElm.style.top = '-9999px';
    meassureElm.style.whiteSpace = 'pre';
    
    meassureElm.textContent = inputelm.value || '';
    
    // add the meassure element to the body
    document.body.appendChild(meassureElm);
    
    return meassureElm;
  }
  
  return function(){
    return createInputMeassureElm(this).offsetWidth;
  }
})();


// delegated event binding
document.body.addEventListener('input', onInputDelegate)

function onInputDelegate(e){
  if( e.target.classList.contains('autoSize') )
    e.target.style.width = getInputValueWidth.call(e.target) + 'px';
}
input{ 
  font-size:1.3em; 
  padding:5px; 
  margin-bottom: 1em;
}

input.type2{
  font-size: 2.5em;
  letter-spacing: 4px;
  font-style: italic;
}
<input class='autoSize' value="type something">
<br>
<input class='autoSize type2' value="here too">

여기 내 2 센트입니다. 비어있는 보이지 않는 div를 만듭니다. 입력 내용으로 채우고 입력 필드에 너비를 반환하십시오. 각 상자 사이에 텍스트 스타일을 일치시킵니다.

$(".answers_number").keyup(function(){
    $( "#number_box" ).html( $( this ).val() );
    $( this ).animate({
        width: $( "#number_box" ).width()+20
        }, 300, function() {
    });
});
#number_box {
   position: absolute;
   visibility: hidden;
   height: auto;
   width: auto;
   white-space: nowrap;
   padding:0 4px;
   /*Your font styles to match input*/
   font-family:Arial;
   font-size: 30px; 
}
    
.answers_number {
   font-size: 30px; 
   font-family:Arial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="answers_number" />
<div id="number_box">
</div>

참고 URL : https://stackoverflow.com/questions/3392493/adjust-width-of-input-field-to-its-input

반응형

'programing tip' 카테고리의 다른 글

PostgreSQL에 행이 존재하는지 확인  (0) 2020.06.17
콘솔에서 같은 위치에 출력을 쓰려면 어떻게합니까?  (0) 2020.06.17
TPL 작업을 중단 / 취소하려면 어떻게합니까?  (0) 2020.06.17
PowerShell에서 SQL Server 쿼리를 어떻게 실행합니까?  (0) 2020.06.17
매개 변수가없는 비동기 메서드를 작성하는 방법은 무엇입니까?  (0) 2020.06.17

'programing tip'의 다른글

  • 현재글입력 필드의 너비를 입력으로 조정

관련글

댓글

티스토리툴바