html - html 输入类型文本中的填充或间距，其值由 javascript 设置

Question

关于 <input type='text'> 的一个非常基本的问题在 HTML 中。

我目前有一个数据库，我正在使用 javascript/ajax 将数据库中的值设置到文本框中。

在正常情况下，文本框中的任何文本都会很好地适应，就像这个 picture .

在非正常情况下，我可以在文本框中设置一个很长的字符串，例如 picture

我想知道是否有任何我不知道的 javascript/css 功能。这样我就可以“动态地”增加 <input type='text'> 的宽度或 <input type='text'> 内的填充这样文本框就可以相对较好地容纳一个长字符串？

我不确定我的问题是否荒谬，因为我们永远不知道我将从数据库中获取的字符串的长度。因此，我似乎不太可能知道可以将文本框的宽度增加多少。

提前致谢。

Answer 1

html:

<input type="text" class="width-dynamic proba dva" placeholder="Type text here to test."/>

jQuery

$.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() || this.attr('placeholder')).css('font', font || this.css('font'));

    return $.fn.textWidth.fakeEl.width();
};

$('.width-dynamic').on('input', function() {
    var inputWidth = $(this).textWidth();
    $(this).css({
        width: inputWidth
    })
}).trigger('input');


function inputWidth(elem, minW, maxW) {
    elem = $(this);
    console.log(elem)
}

var targetElem = $('.width-dynamic');

inputWidth(targetElem);

https://codepen.io/samgray75/pen/NzvyBx