Question

我在react app中有一个表单

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

默认情况下，所有元素都使用display：flex。

我需要输入大小为最小宽度为30px ，但如果输入数字更长（即8位数），我需要输入拉伸本身最大宽度为80px，同时仍在右侧对齐。

这是表格的小提琴 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;  
}

这是理想状态的图像。

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

Answer 1

您可以使用内容可编辑而不是输入的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'>

Answer 2

正如@DanFarrell所说，html中的<input />并非设计用于内联显示。

将<span />与contentEditable="true"一起使用，使用已修改的代码集https://codepen.io/valuis/pen/LeVrbx

和代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

最小输入宽度随着价值增长

2 个答案: