javascript - 禁用输入数据的动态宽度

Question

首先，我已经尝试研究如何根据数据的宽度使我的输入动态化，但我能看到的所有答案都来自未禁用的输入。它的触发来自 key up 或 onclick 这不适用于我的，因为我的输入被禁用。

这是我的问题的截图。如您所见，我的比索字数有所减少，并且没有动态增加。

这是我的 html:

<table width="100%">
    <tr>
         <td> 
           <div style="height:35px">
                   <div style="float:left" class="controlLabelBold">Check Number:</div>
                   <div style="float:left">
                     <input type="password" name="checkNumber" class="text ui-widget-content ui-corner-all" style="width:250px; height: 17px;" />
                   </div>
           </div>  
        </td>
        <td>
           <div style="height:35px">
                   <div style="float:left" class="controlLabel">Check Date:</div>
                   <div style="float:left">
                   <input name="checkDate" class="checkDate text ui-widget-content ui-corner-all"  style="width:250px;" readonly /></div>
           </div> 
        </td>
    </tr>
    <tr>
        <td>
           <div style="height:35px">
                   <div style="float:left" class="controlLabel">Client Name:</div>
                   <div style="float:left"><input name="clientName" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly /> </div>
           </div> 
        </td>
        <td>
           <div style="height:35px">
                   <div style="float:left" class="controlLabel">Amount:</div>
                   <div style="float:left"><input name="amount" class="text ui-widget-content ui-corner-all" style="width:250px;" readonly/></div>
           </div> 
        </td>
    </tr>
    <tr>
        <td>
             <div style="height:35px">
                   <div style="float:left" class="controlLabel">Pesos:</div>
                   <div style="float:left"><input id="amountInWords" name="amountInWords" class="text ui-widget-content ui-corner-all" 
                    style="min-width:250px;" readonly /></div>
           </div> 
        </td>
    </tr>
</table>

问题:

• 即使我的输入被禁用，真的有可能是动态的吗？如果是如何？如果没有，为什么？

要求:

• 我的输入比索的最小宽度应为 250 像素，因为它需要与其他输入对齐。

• 我的问题只在于输入Pesos

• 接受 HTML、CSS 或 Javascript 解决方案。

• 我认为我不再需要包含我的 css 样式，因为它不再需要了。如果 css 是解决方案，只需添加一个新类。

• 我准备了一个 jsfiddle这里

Answer 1

仅使用 CSS，无法制作 <input>根据内容扩展其大小。不过，可以通过 Javascript 实现(参见 Rayon Dabre's solution )。

但这里的简单答案是使用一个自然展开以显示其内容的元素，例如 <span> ，并将其设置为看起来像输入:

从你的照片来看，我正在接近:

span.disabledInput {
  display: inline-block;
  background-color: #F0F0F0;
  border-radius: 6px;
  border: 1px solid #EEE;
}

您甚至可以将其设为可编辑。这是一个更有说服力的例子:

.form-control.disabledInput {
  height: initial;
  background-color: #eee;
  border: 1px solid #ccc;;
  display: inline-block;
  clear: left;
  width: auto;
  color: #666;
  box-sizing: border-box;
}
.form-control.disabledInput:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-group.col-xs-12 label {
  display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">

  <div class="row">
    <div class="form-group col-sm-6">
      <label for="checkNumber">Check Number:</label>
      <input type="password" class="form-control" name="checkNumber" id="checkNumber">
    </div>
    <div class="form-group col-sm-6">
      <label for="checkDate">Check Date:</label>
      <input type="text" class="form-control" name="checkDate" id="checkDate" readonly>
    </div>
    <div class="form-group col-sm-6">
      <label for="clientName">Client Name:</label>
      <input type="text" class="form-control" name="clientName" id="clientName" readonly>
    </div>
    <div class="form-group col-sm-6">
      <label for="amount">Amout:</label>
      <input type="text" class="form-control" name="amout" id="amount" readonly>
    </div>
    <div class="form-group col-xs-12">
      <label>Pesos:</label>
      <span type="text" tabindex="0" contenteditable="true" class="form-control disabledInput">To make this <code>span</code> not editable, remove the <code>contenteditable</code> attribute... <br />Don't forget to resize your browser!</span>
    </div>
  </div>

如果你想匹配精确的样式，你应该检查禁用<input> .关注line-height , font-size , padding和 margin特性。另外，不要忘记添加 tabindex属性所以它可以是:focus -ed，像真正的一样<input> s 在页面中。

现在，由于您的输入被禁用，这就是您需要做的所有事情。

但是，如果您的假“输入”不是 disabled你必须添加 contenteditable="true"给它。如果它必须是您提交表单的一部分，您还必须添加 <input type="hidden">这将更改其值以匹配 .text你的属性(property)<span> .再次诉诸 JavaScript。