最小输入宽度随值增长答案

【问题标题】：Minimal input width growing with value最小输入宽度随值增长
【发布时间】：2018-05-28 16:45:06
【问题描述】：

我在 react 应用中有一个表单

左侧的标签
右侧的值 + 单位输入

所有元素默认使用 display:flex。

我需要输入尺寸具有最小宽度 30px，但如果 输入数字较长（即 8 位），我需要输入 >将自身拉伸至最大宽度 80 像素，同时仍保持在右侧对齐。

这是一个形式的小提琴 https://codepen.io/anon/pen/MrweLQ

行的HTML：

<div class="formRow formRowEven">
    <div class="label">Long value</div>
    <div class="valueWrapper">
      <div class="value">
        <input value="12345678"/>
      </div>
      <div class="unit">min</div>
    </div>
  </div>

CSS：

.formRow {
  display: flex;
  flex-direction: row;
  flex: 1 1;
}

.label {
  flex: 1 1;
}
.valueWrapper {
  display: flex;
  flex-direction: row;
}

.value {
  display: flex;
  margin-right: 5px;
  min-width: 0;
  max-width: 80px;
  display: flex;
  justify-content: flex-end;
}

input {
  color: #fff;
  min-width: 0;
  display: flex;
  flex: 1 0 30px;
  border-width: 0 0 1px;
  border-color: #ccc;
  border-style: solid;  
}

这是理想状态的图像。

我无法弄清楚输入/单位左侧的设置，有人帮忙吗？

【问题讨论】：

虽然大多数 HTML 元素会根据其内容进行缩放，但也有一些例外，包括大多数表单组件（文本区域、输入字段和选择是最流行的）。您必须使用 dom onInput 事件处理程序在输入文本时动态增加输入。

标签： css reactjs input layout flexbox

【解决方案1】：

正如@DanFarrell 所说，html 中的<input /> 不是为内联显示而设计的。

使用<span /> 和contentEditable="true"，修改codepen https://codepen.io/valuis/pen/LeVrbx

和代码sn-p：

@import url(//fonts.googleapis.com/css?family=Roboto:400,300);
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

html {
  font-size: 17px;
}

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background: #111;
  font-family: 'Roboto';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrapper {
  background: #48435C;
  margin: 2rem auto 0;
  max-width: 80%;
  color: #fff;
  border: 1px solid #ddd;
  padding: 20px 0;
}

h1 {
  padding: 0 30px;
}

.formRow {
  padding: 10px 30px;
}

.formRowOdd {
  background: #383850;  
}

/* LAYOUT */
.formRow {
  display: flex;
  flex-direction: row;
  flex: 1 1;
}

.label {
  display: flex;
  flex: 1 1;
}
.valueWrapper {
  display: flex;
  flex-direction: row;
}

.value {
  display: flex;
  margin-right: 5px;
  min-width: 0;
  max-width: 80px;
  display: flex;
  justify-content: flex-end;
}

span {
  display: flex;
  color: #fff;
  background: transparent;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  max-width: 80px;
  flex: 1 0 30px;
  border-width: 0 0 1px;
  border-color: #ccc;
  border-style: solid;  
}

<div class="wrapper">
  <h1>Form</h1>
  <div class="formRow formRowOdd">
    <div class="label">Short value</div>
    <div class="valueWrapper">
      <div class="value">
        <span contentEditable="true">123</span>
      </div>
      <div class="unit">min</div>
    </div>
  </div>
  <div class="formRow formRowEven">
    <div class="label">Long value</div>
    <div class="valueWrapper">
      <div class="value">
        <span contentEditable="true">1234567</span>
      </div>
      <div class="unit">min</div>
    </div>
  </div>
  <div class="formRow formRowOdd">
    <div class="label">Value to be filled</div>
    <div class="valueWrapper">
      <div class="value">
        <span contentEditable="true" />
      </div>
      <div class="unit">min</div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

您可以使用内容可编辑的 div 代替输入，这样您就可以在键入时扩展它。然后你只需将文本推送到隐藏的输入中。

类似这样的：

   var fakeInput = document.getElementById('yourFakeInput');
   var Inputelement = document.getElementById('theRealInput');
        
        fakeInput.onblur = function() {
          Inputelement.value = fakeInput.innerHTML;
          console.log(fakeInput.clientWidth + 'px');
}

 div {
      width: auto;
      display: inline-block;
    }

    <div id='yourFakeInput' contenteditable="true">type here...</div>
    <input id='theRealInput' type='hidden'>

【讨论】：