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

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

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

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


当前回答

为了更好的外观和感觉

你应该使用jQuery keypress()事件结合String.fromCharCode(e.which)来获得按下的字符。因此你可以计算你的宽度。为什么?因为这样看起来会更性感:)

下面是一个jsfiddle,与使用keyup事件的解决方案相比,它产生了良好的行为:http://jsfiddle.net/G4FKW/3/

下面是一个普通的JS,它监听<input>元素的输入事件,并将span兄弟元素设置为具有相同的文本值,以便测量它。

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>

其他回答

更新答案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())
    })
  })

为了更好的外观和感觉

你应该使用jQuery keypress()事件结合String.fromCharCode(e.which)来获得按下的字符。因此你可以计算你的宽度。为什么?因为这样看起来会更性感:)

下面是一个jsfiddle,与使用keyup事件的解决方案相比,它产生了良好的行为:http://jsfiddle.net/G4FKW/3/

下面是一个普通的JS,它监听<input>元素的输入事件,并将span兄弟元素设置为具有相同的文本值,以便测量它。

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>

值得注意的是,当字体是等宽的时候,可以进行漂亮的大小调整,所以我们可以使用ch单位完美地调整输入元素的大小。

同样,在这种方法中,我们可以通过在输入事件上更新CSS变量(自定义属性)来更新字段的宽度,我们还应该照顾已经在DOMContentLoaded事件上预先填充的输入

Codepen演示


标记

<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:这个变量将包含输入的长度,它将在calc()表达式中乘以1ch。默认情况下,我们也可以设置最小宽度,例如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);
});

当然,即使你不使用等宽字体,这仍然有效,但在这种情况下,你将需要通过将——size变量乘以另一个不同于1ch的值(它严格依赖于font-family和font-size)来改变calc()公式。

为什么不使用css呢?

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

函数keyup(e) { . getelementbyid(“鬼”)。innerText = e.target.value; } #包装{ 位置:相对; min-width: 30 px; 显示:inline-block; } 输入{ 位置:绝对的; 左:0; 右:0; 边框:1px纯蓝色; 宽度:100%; } #鬼{ 颜色:透明; } < div id = "包装" > <输入onkeyup = "按键弹起(事件)" > < div id = "鬼" > < / 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介绍的,我认为我应该分享它

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