0

我一直在寻找一种方法来动态更改 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>

我将如何调整它以适用于我非常大的表单上的每个输入字段？

谢谢

4

2 回答 2

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属性中提取，并检查所需的长度。

于 2012-08-04T21:03:39.230 回答
0

您可以在一个集合中收集元素，或者从整个文档中获取它们，或者从它的某些包含元素中获取它们。您可以使用例如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;
        }
    }
};

例子

于 2012-08-05T00:10:20.293 回答