Question

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

这是我的问题的截图。正如你所看到的那样，Pesos中的单词金额被削减，并没有动态扩展。

这是我的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>

问题：

即使我的输入被禁用，它是否真的可以动态化？如果有，怎么样？如果没有原因？

要求：

输入Pesos的最小宽度应为250px，因为它需要与其他输入对齐。
我的问题仅在于输入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;
}

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

＆＃13;

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

＆＃13;

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

＆＃13;

如果要匹配确切的样式，则应检查已禁用的<input>。密切关注line-height，font-size，padding和margin属性。另外，不要忘记添加tabindex属性，以便它可以:focus编辑，就像页面中的真实<input>一样。

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

但是，如果你的假冒＆＃34;输入＆＃34;没有disabled您必须向其添加contenteditable="true"。如果必须在提交时将其作为表单的一部分，那么您还必须添加<input type="hidden">，以更改其值以匹配.text的{{1}}属性。再次，诉诸JavaScript。

Answer 2

它没有扩展，因为它是第一列的一部分。它只是不能继续第二个。

要解决此问题，请添加

create function registerStudent(
      s_id varchar(5),
      s_courseid varchar (8), 
      s_secid varchar (8),
      semester varchar (6), 
      s_year numeric (4,0),
      out errorMsg varchar(100)
      ) returns integer 
      begin 
           declare currEnrol int; 
           select count(*) into currEnrol from takes
           where course_id = s_courseid 
           and secid = s_secid 
           and semester = s_semester 
           and year = s_year; 

       declare limit int; 
       select capacity into limit 
       from classroom 
       natural join section 
       where course_id = s_courseid 
       and secid = s_secid 
       and semester = s_semester 
       and year = s_year; 

       if (currEnrol < limit) begin 
           insert into takes values  (s_id, s_courseid, s_secid, s_semester, s_year, null); 
           return(0); 
       end

      set errorMsg = 'Enrollment limit reached for course ' I I s_courseid II ' section ' I I s_secid; 
      return(-1); 
  end;

在你的最后一个TD上（表示要占用两列的空间）

示例：http://reference.sitepoint.com/html/th/colspan/demoframe

Answer 3

将静态常量视为字符的宽度，因为 H 且 I 不能消耗相同的空间，因此无法准确。

试试这个：

＆＃13;

del

＆＃13;

document.getElementById('amountInWords').style.width = document.getElementById('amountInWords').value.length * 7 + 'px'

＆＃13;

已禁用输入数据的动态宽度

3 个答案: