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 に答える