Question

我一直在寻找一种动态更改HTML表单中输入字段长度的方法。我遇到过以下情况：

    <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>Example</title>

 <script type="text/javascript">
 window.onload = function() {
 thelink = document.getElementById('MyLink');
 linksize = thelink.value.length;
 if (linksize < 10) thelink.size = 10;
 if (linksize > 50) thelink.size = 50;
 }
 </script>
 </head>

 <body>
 <input id="MyLink" type="text" value="http://www.domain.com/this/is/a/very/long/link/example" />
  </body>

 </html>

我如何使这个适应我的大型表格上的每个输入字段？

由于

Answer 1

对于您的情况，我会将所需的最小值和最大值设为data-*=属性，

例如：

<input id="MyLink" data-min="10" data-max="50" type="text" value="http://www.domain.com/this/is/a/very/long/link/example" />

然后遍历表单中的输入，从data属性中绘制，并检查所需的长度。

Answer 2

您可以收集collection中的元素，从整个文档或其中包含的元素中获取元素。你可以用例如getElementsByTagName('input');，getElementsByName('myInput');或getElementsByClassName('shapable_input');方法，如果代码已设置相应的属性：

<input name="myInput" class="shapable_input" value="...." />

然后可以在循环中测试所有收集的标签：

window.onload = function() {
    var links = document.getElementsByTagName('input');
    //var linksc = links.getElementsByClassName('link');
    var i, thelink, linksize;
    for (i = 0; i < links.length; i++) {
        thelink = links[i];
        linksize = thelink.value.length;
        if (linksize <= 10) {
            thelink.size = 10;
        }
        if (linksize > 10) {
            thelink.size = 50;
        }
    }
};

example

所有输入字段的动态输入长度

2 个答案: