Có cách nào để chia tỷ lệ chiều rộng của an <input type="text">thành chiều rộng của giá trị thực không?

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

Bạn có thể thực hiện việc này một cách dễ dàng bằng cách đặt sizethuộc tính thành độ dài của nội dung đầu vào:

function resizeInput() {
    $(this).attr('size', $(this).val().length);
}

$('input[type="text"]')
    // event handler
    .keyup(resizeInput)
    // resize on page load
    .each(resizeInput);

Xem: http://jsfiddle.net/nrabinowitz/NvynC/

Điều này dường như thêm một số phần đệm ở bên phải mà tôi nghi ngờ là phụ thuộc vào trình duyệt. Nếu bạn muốn nó thực sự chặt chẽ với đầu vào, bạn có thể sử dụng một kỹ thuật như kỹ thuật tôi mô tả trong câu trả lời liên quan này , sử dụng jQuery để tính toán kích thước pixel cho văn bản của bạn.

MỘT GIẢI PHÁP HOÀN HẢO ĐƠN GIẢN NHƯNG PIXEL

Tôi đã thấy một số cách để làm điều này nhưng việc tính toán độ rộng của phông chữ không phải lúc nào cũng chính xác 100%, nó chỉ là ước tính.

Tôi đã quản lý để tạo ra một pixel hoàn hảo để điều chỉnh chiều rộng đầu vào bằng cách có một trình giữ chỗ ẩn để đo từ đó.

jQuery (Khuyến nghị)

$(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>

JavaScript thuần túy

Tôi không thể xác định cách jQuery tính toán chiều rộng của các phần tử ẩn vì vậy cần phải có một chút tinh chỉnh đối với css để phù hợp với giải pháp này.

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>

Nếu vì lý do nào đó mà các giải pháp khác không phù hợp với bạn, bạn có thể sử dụng một khoảng có thể thay đổi được thay vì một phần tử đầu vào.

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

Lưu ý rằng đây là một cuộc tấn công nhiều hơn và có nhược điểm nghiêm trọng là cho phép đầu vào HTML hoàn toàn không được bảo vệ như cho phép người dùng nhập (và dán) dấu ngắt dòng, liên kết và HTML khác.

Vì vậy, bạn có thể không nên sử dụng giải pháp này trừ khi bạn đang vệ sinh đầu vào rất cẩn thận ...

Cập nhật : bạn có thể muốn sử dụng giải pháp của DreamTeK bên dưới .

Chỉnh sửa : Plugin hiện hoạt động với các ký tự khoảng trắng ở cuối. Cảm ơn bạn đã chỉ ra @JavaSpyder

Vì hầu hết các câu trả lời khác không phù hợp với những gì tôi cần (hoặc đơn giản là không hoạt động chút nào) nên tôi đã sửa đổi câu trả lời của Adrian B thành một plugin jQuery thích hợp dẫn đến tỷ lệ đầu vào hoàn hảo theo pixel mà không yêu cầu bạn thay đổi css hoặc html của mình.

Ví dụ: https://jsfiddle.net/587aapc2/

Sử dụng:$("input").autoresize({padding: 20, minWidth: 20, maxWidth: 300});

Cắm vào:

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

Tôi có một plugin jQuery trên GitHub: https://github.com/MartinF/jQuery.Autosize.Input

Nó phản ánh giá trị của đầu vào, tính toán chiều rộng và sử dụng nó để thiết lập chiều rộng của đầu vào.

Bạn có thể xem một ví dụ trực tiếp tại đây: http://jsfiddle.net/mJMpw/2175/

Ví dụ về cách sử dụng nó (vì cần một số mã khi đăng liên kết 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;    
}

Bạn chỉ cần sử dụng css để đặt chiều rộng tối thiểu / tối đa và sử dụng hiệu ứng chuyển tiếp trên chiều rộng nếu bạn muốn có hiệu ứng đẹp.

Bạn có thể chỉ định khoảng trắng / khoảng cách đến cuối là giá trị trong ký hiệu json cho thuộc tính data-autosize-input trên phần tử đầu vào.

Tất nhiên bạn cũng có thể khởi tạo nó bằng jQuery

$("selector").autosizeInput();

Đã có rất nhiều câu trả lời hay ở đây. Để giải trí, tôi đã thực hiện giải pháp này bên dưới, dựa trên các câu trả lời khác và ý tưởng của riêng tôi.

<input class="adjust">

Yếu tố đầu vào được điều chỉnh pixel chính xác và có thể xác định độ lệch bổ sung.

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

Quá trình điều chỉnh sẽ được thực hiện trơn tru với quá trình chuyển đổi CSS.

.adjust {
    transition: width .15s;
}

Đây là trò chơi . Tôi hy vọng điều này có thể giúp những người khác đang tìm kiếm một giải pháp sạch.

Thay vì cố gắng tạo một div và đo chiều rộng của nó, tôi nghĩ đo chiều rộng trực tiếp bằng cách sử dụng phần tử canvas sẽ chính xác hơn.

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

Bây giờ bạn có thể sử dụng điều này để đo chiều rộng của một số phần tử đầu vào bất kỳ lúc nào bằng cách thực hiện điều này:

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

Điều này trả về một số (có thể là dấu phẩy động). Nếu bạn muốn tính đến padding, bạn có thể thử cách này:

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

Bạn có thể giải quyết vấn đề này như ở đây :) 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');

Thật không may, sizethuộc tính sẽ không hoạt động rất tốt. Đôi khi sẽ có thêm không gian và quá ít không gian, tùy thuộc vào cách thiết lập phông chữ. (xem ví dụ)

Nếu bạn muốn điều này hoạt động tốt, hãy thử xem các thay đổi trên đầu vào và sau đó thay đổi kích thước. Bạn có thể muốn đặt nó thành đầu vào scrollWidth. Chúng tôi cũng cần tính đến kích thước hộp.

Trong ví dụ sau, tôi đang đặt giá sizetrị đầu vào thành 1 để ngăn nó có giá trị scrollWidthlớn hơn chiều rộng ban đầu của chúng tôi (đặt thủ công bằng CSS).

// (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>

Tôi nghĩ rằng điều này sẽ hoạt động ngay cả trong IE6, nhưng đừng coi thường nó.

Tùy thuộc vào trường hợp sử dụng của bạn, bạn có thể cần phải liên kết chức năng điều chỉnh với các sự kiện khác. Ví dụ: thay đổi giá trị của đầu vào theo chương trình hoặc thay đổi thuộc tính kiểu của phần tử displaytừ none(where scrollWidth === 0) thành blockhoặc inline-block, v.v.

Tôi đã tìm thấy một giải pháp khác cho vấn đề này không liên quan đến JS. Trong HTML, tôi chỉ đặt một cái gì đó như:

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

Tất cả những gì cần thiết là đặt khả năng hiển thị: ẩn trên đầu vào ma và chiều rộng: 100% trên chính đầu vào. Nó hoạt động vì đầu vào mở rộng đến 100% vùng chứa của nó mà chiều rộng được tính toán bởi chính trình duyệt (dựa trên cùng một văn bản).

Nếu bạn thêm một số đệm và đường viền vào trường nhập, bạn phải điều chỉnh lớp nhập ma của mình cho phù hợp (hoặc sử dụng calc () trong lớp đầu vào).

Plugin jQuery của tôi phù hợp với tôi:

Sử dụng:

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

    });

Mã nguồn của 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']);

Các phần tử đầu vào hoạt động khác với các phần tử khác, điều này sẽ làm đúng như những gì bạn muốn nếu bạn cung cấp cho chúng float: left(xem http://jsfiddle.net/hEvYj/5/ ). Tôi không nghĩ rằng điều đó là khả thi nếu không tính toán nó theo một cách nào đó bằng JavaScript (tức là thêm 5px vào chiều rộng mỗi chữ cái trong hộp).

Giải pháp của người dùng nrabinowitz đang hoạt động tốt, nhưng tôi sử dụng keypresssự kiện thay vì keyup. Điều đó làm giảm độ trễ nếu người dùng nhập chậm.

Đây là sửa đổi của tôi về giải pháp nrabinowitz ' . Tôi đã không sử dụng thuộc tính kích thước , vì nó không hoàn hảo với các phông chữ tỷ lệ như @Mark đã lưu ý. Giải pháp của tôi đặt một phần tử sau đầu vào của bạn và được trình duyệt tính chiều rộng (sử dụng jQuery).

Mặc dù tôi không kiểm tra nó, tôi cho rằng nó sẽ hoạt động chỉ khi tất cả các thuộc tính CSS ảnh hưởng đến phông chữ được kế thừa.

Các đầu vào chiều rộng thay đổi nào trên focusout sự kiện, hoạt động tốt hơn cho tôi. Nhưng bạn cũng có thể sử dụng tổ hợp phím / nhấn phím để thay đổi độ rộng của đầu vào khi nhập.

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

Sử dụng canvas, chúng tôi có thể tính toán chiều rộng các phần tử:

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

và sử dụng nó vào sự kiện đã chọn:

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

thử giải pháp canvas MeasureText

css:

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

javascript:

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

Tôi đã giải quyết chiều rộng tạo canvas và tính toán kích thước của nó. điều quan trọng là giá trị đầu vào và canvas có chung các đặc điểm phông chữ (họ, kích thước, trọng lượng ...)

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