<input type="text" value="1" style=" font - family:宋体;/>

这是我的代码,它不工作。在HTML, JavaScript, PHP或CSS中是否有其他方法来设置最小宽度?

我想要一个具有动态变化宽度的文本输入字段,以便输入字段围绕其内容流动。每个输入都有一个2em的内置填充,这就是问题所在,第二个问题是最小宽度在输入上根本不起作用。

如果我设置的宽度超过了需要的宽度,那么整个程序就会很混乱,我需要1px的宽度,只在需要的时候才需要。


当前回答

更新答案https://stackoverflow.com/a/41389961/1022684

如果你有多个输入并且不想重复输入文本:

  $(() => {
    $('.container input').on('input', (e) => {
      $(e.target).prev().text($(e.target).val())
    })  
    $('.container input').each((idx, elem) => {
      $(elem).prev().text($(elem).val())
    })
  })

其他回答

演进版:

<input type="text" style="width: {tag.length}ch" bind:value={tag} />

更新答案https://stackoverflow.com/a/41389961/1022684

如果你有多个输入并且不想重复输入文本:

  $(() => {
    $('.container input').on('input', (e) => {
      $(e.target).prev().text($(e.target).val())
    })  
    $('.container input').each((idx, elem) => {
      $(elem).prev().text($(elem).val())
    })
  })

我只是花了些时间来弄清楚怎么做。 实际上,我发现的最简单的方法是将输入值移动到span之前的输入,保持输入1个符号宽度。虽然我不确定它是否适合你最初的需求。 也许它需要一些额外的代码,但在react+flux的应用程序中,这是非常自然的解决方案。

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

上面的函数获取输入值,修剪多余的空格,并将文本设置为span以获得宽度。如果没有文本,则获取占位符并将其输入到span中。一旦它将文本输入到span中,它就会设置输入的宽度。宽度上的+ 5是因为如果没有它,在Edge浏览器中输入会被切断一小部分。

$('.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);
});

如果这可以改进,请让我知道,因为这是我能想出的最干净的解决方案。

如果你使用Bootstrap,它可以很容易地完成:

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

您只需要获取div的内容,并在提交表单之前将其放入隐藏输入中。