如何将错误/信息 div 与其上方的文本框链接起来答案

【问题标题】：How do I link an error/information div with a textbox above it如何将错误/信息 div 与其上方的文本框链接起来
【发布时间】：2012-12-21 00:30:15
【问题描述】：

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

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

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

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

【问题讨论】：

您是否考虑过使用label？ for 属性用于指向 input 元素，因此非常适合您的需求。
@FrankvanPuffelen 问题是我正在尝试动态显示指令，并且我还想显示错误消息。在这种情况下使用标签有什么好处吗？
有一个将label 与input 元素相关联的书面语义，这似乎是您所要求的。一个标签可以包含所有所谓的内联元素（类似于您可以放入 p 的内容），因此只要您放入的内容属于该类别，它就可以工作。
@FrankvanPuffelen 这是有道理的；我并没有真正考虑过以这种方式使用标签。有没有一种方法可以轻松地将标签与其父元素相关联，例如我想得到这个文本框的标签，所以我调用方法 X
我不确定为此使用标签是否可取。 WCAG 2.0 Input Assistance 可能会有一些建议。

标签： javascript html forms

【解决方案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/

【讨论】：

谢谢！这正是我一直在寻找并且即将放弃的东西！

【解决方案2】：

标签可能是更好的选择，但如果你想使用 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 上尝试过它并且它有效。

我相信有更好的方法。

【讨论】：

我同意...这是一个很好的解决方案，绝对有效，但感觉他们应该是一种更好的方法 - 有点像命名技术或使用标签。感谢您的帮助
看看stackoverflow.com/questions/285522/… - 它为输入创建了一个标签属性，因此您可以轻松地参考标签进行隐藏和显示。
我看到了那个。仍然不喜欢它，因为似乎没有必要遍历所有这些，但这可能是我最好的选择。
即使您不为说明和错误消息使用标签（我不确定这是一个好主意），输入也需要标签。
jQuery 不是一个选项？你可以添加到输入标签 onfocus=\"$('label[for=\"+this.id+\"]').show()\" onblur=\"$('label[for=\"+this .id+\"]').hide()\" 不在我的脑海中，应该可以工作。