Question

我有一个输入字段，它有一些固定的宽度。（例如：200px）和占位符文字有更多的字母。

如何根据占位符文本/宽度动态更改输入字段的宽度？

Answer 1

将function sum_cr(that) { alert($(that).parent('td').prev('td').find('input').val()); }设为Run code snippetExpand snippet I want to alert the value of input under 2nd td (ie; headers="ACNO" ) when onblur occurs at input under 3rd td(ie;headers="CREDIT") . So I wrote the below javascript function sum_cr() as

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td headers="DAYDT">
        <label for="f01_0050" class="u-VisuallyHidden"> </label>
        <input name="f01" value="28-05-2018" type="text">
      </td>
      <td headers="ACNO">
        <label for="f03_0050" class="u-VisuallyHidden"> </label>
        <input name="f03" value="1413/4" class="accno" type="text">
      </td>
      <td headers="CREDIT">
        <label for="f04_0050" class="u-VisuallyHidden"></label>
        <input name="f04" value="100" class="cr_amt" onblur="sum_cr(this);" id="f04_0050" type="text">
      </td>
      <td headers="FINE AMT">
        <label for="f06_0050" class="u-VisuallyHidden"> </label>
        <input name="f06" value="" id="f06_0050" type="text">
      </td>
    </tr>
  </tbody>
</table>

size

Answer 2

你可以使用javascript或jquery来实现，获取占位符的长度，然后将其分配给输入大小; JS代码：

<input placeholder="I am a long text...I am a long text...I am a long text "/>

，或者的 JQuery的：

usr/lib/python2.7/site-packages

Answer 3

以下是您如何操作的链接 - https://jsfiddle.net/4s03razg/

<div>
    <script>
        var prevLen = 50;
        window.resizeBox = function() {
            var elem = document.getElementById("resizable-input");
            if(elem.value && elem.value.length > 5) {
                prevLen += 10;
                elem.style.width = prevLen + "px";      
            }
        };

        function initializeBox() {
            var elem = document.getElementById("resizable-input");
            elem.style.width = prevLen + "px";
        }
        initializeBox();
    </script>
    <input id="resizable-input" type="text" onkeypress="resizeBox()"/>
</div>

这只是一个例子。您必须使用正确的数字和事件来触发调整大小。你最好使用＆＃39;这个＆＃39;来获取元素。在方法调用事件中，我认为。

如何根据占位符文本调整“输入”字段的宽度？

3 个答案: