0

私はいくつかの入力ボックスを備えたかなり標準的なhtmlフォームを持っています。各テキストボックスの下に小さなdivがあり、テキストボックスにフォーカスがあるとき（残りの時間は非表示になっているとき）に方向が表示されます。divは、色を変更したり、エラーメッセージを表示したりすることもできます。

フォーカスの方向を表示するjavascript関数、ぼかしのエラーを表示する関数、方向/エラーを非表示にする関数などを1つ持つことができるようにしたいと思います。

私が遭遇している問題は、テキストボックスとそれぞれのdivをどのように最適に関連付けるかです。私は、テキストボックスにのようなIDを付けてから、field1それらのdivを呼び出すという命名規則を使用しましたfield1Div。これは問題なく機能しましたが、これを行うためのより良い方法があることがわかりました。

divとテキストボックスを関連付ける「正しい」方法は何ですか？

4

2 に答える 2

1

ラベルはより良い方法かもしれませんが、Div を使用したい場合は、次のようなものを使用できます。

<html>
<head>
<script>
    function giveDirections(obj){  
obj.nextElementSibling.style.display="block"                
    }
    function hideDirections(obj){
    obj.nextElementSibling.style.display="none"
    }
    </script>
    </head>
<body>
    <input id="test" name="test" onfocus="giveDirections(this)" onblur="hideDirections(this)" />
    <div style="display:none">Hi I am some directions</div>
    </body>
</html>

http://jsfiddle.net/zq533/8/

this.nextElementSibling を使用 - ただし、すべてのブラウザがサポートされているかどうかはわかりません - FF、IE、Chrome で試してみたところ、うまくいきました。

もっと良い方法があると確信しています。

于 2012-12-21T01:00:07.813 に答える