Question

如何自动调整显示文字的大小以适应文本框，因为某些较长的文本无法完全显示，请帮助解决方案，我尝试了width="auto"但它没有工作。这是我的代码：

<form style="width: 1000px; padding-left: 20px;" method = "POST" action = "addprocess.php">
 <fieldset style="border: solid 1px; padding: 0 10px 10px 10px;">
  <legend align="center" style="width: auto !important; border: none;">Semester Courses</legend><br>


  <label style="font-family: verdana; font-size: 27px;">Please select one elective course from the options below</label>
  <div class="row">
  <label style="font-family: verdana; font-size: 25px;">&emsp;Electives&ensp;</label>
  <div class="col-auto">
  <div class="input-group">
   <input type="text" id="display" class="form-control" aria-label="Text input with dropdown button" readonly width="auto">
  <div class="input-group-btn">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Click to Select
    </button>

    <div class="dropdown-menu dropdown-menu-right">
      <button type="button" class="dropdown-item" value="Evolutionary Ecology">BIOL 8803</button>
      <div role="separator" class="dropdown-divider"></div>
      <button type="button" class="dropdown-item" value="Advanced Evolutionary Biology">BIOL 8805</button>
      <div role="separator" class="dropdown-divider"></div>
      <button type="button" class="dropdown-item" option value="Evolutionary Genetics">BIOL 8809</button>

     </div>
   </div>
 </div>
 </div>
 </div>
 <br><br>
    <button class="btn btn-primary" type="submit">Submit</button>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    <button class="btn btn-primary" type="reset">Reset</button>
 </fieldset>
</form>

<script type="text/javascript">
    var buttons = document.querySelectorAll('.dropdown-item')
    var textbox = document.getElementById('display')

    for (let i=0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", function(e) {
            textbox.value = e.target.value
        })
    }
</script>

Answer 1

您可以通过设置size属性来完成此操作。

 textbox.setAttribute('size',e.target.value.length);

＆＃13;

var buttons = document.querySelectorAll('.dropdown-item')
var textbox = document.getElementById('display')

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function(e) {
    textbox.value = e.target.value
    textbox.setAttribute('size', e.target.value.length);

  })
}

＆＃13;

<form style="width: 1000px; padding-left: 20px;" method="POST" action="addprocess.php">
  <fieldset style="border: solid 1px; padding: 0 10px 10px 10px;">
    <legend align="center" style="width: auto !important; border: none;">Semester Courses</legend><br>


    <label style="font-family: verdana; font-size: 27px;">Please select one elective course from the options below</label>
    <div class="row">
      <label style="font-family: verdana; font-size: 25px;">&emsp;Electives&ensp;</label>
      <div class="col-auto">
        <div class="input-group">
          <input type="text" id="display" class="form-control" aria-label="Text input with dropdown button" readonly width="auto">
          <div class="input-group-btn">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Click to Select
    </button>

            <div class="dropdown-menu dropdown-menu-right">
              <button type="button" class="dropdown-item" value="Evolutionary Ecology">BIOL 8803</button>
              <div role="separator" class="dropdown-divider"></div>
              <button type="button" class="dropdown-item" value="Advanced Evolutionary Biology">BIOL 8805</button>
              <div role="separator" class="dropdown-divider"></div>
              <button type="button" class="dropdown-item" option value="Evolutionary Genetics">BIOL 8809</button>

            </div>
          </div>
        </div>
      </div>
    </div>
    <br><br>
    <button class="btn btn-primary" type="submit">Submit</button>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    <button class="btn btn-primary" type="reset">Reset</button>
  </fieldset>
</form>

＆＃13;

Answer 2

另一个选项是在为文本框指定值后更改文本框的宽度。

textbox.style.width = textbox.scrollWidth + 'px';

此选项不会重置，但仍将保持所选最大文本的大小。

调整文本框大小以适合文本

2 个答案: