0

我有一个带有几个输入框的非常标准的 html 表单。我在每个文本框下都有一个小 div，当文本框具有焦点时显示方向（其余时间它们被隐藏）。div 还可以更改颜色并显示错误消息。

我希望能够有一个 javascript 函数来显示焦点方向，一个函数来显示模糊错误，一个函数来隐藏方向/错误等。

我遇到的问题是如何最好地将文本框和它们各自的 div 关联起来。我使用了一个命名约定，我给文本框一个 ID field1，然后调用它们的 div field1Div。这工作正常，但有些事情告诉我有更好的方法来做到这一点。

关联 div 和文本框的“正确”方法是什么？

4

2 回答 2

1

标签可能是更好的方法，但如果你想使用 Divs - 你可以使用这样的东西：

<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 回答
1

您可以为输入框定义自定义属性。

<html>
<head>
<script>
    function showHint(obj){  
        document.getElementById(obj.getAttribute("hintbox")).style.visibility = "visible";                  
    }
    function hideHint(obj){
        document.getElementById(obj.getAttribute("hintbox")).style.visibility = "hidden";  
    }
    </script>
    </head>
<body>
    <input hintbox="div1" onfocus="showHint(this)" onblur="hideHint(this)" />
    <div id="div1" style="visibility:hidden">hint 1</div>
    <input hintbox="div2" onfocus="showHint(this)" onblur="hideHint(this)" />
    <div id="div2" style="visibility:hidden">hint 2</div>
    </body>
</html>​

http://jsfiddle.net/YhefV/

于 2012-12-21T01:46:50.963 回答