当用户通过表单进展时，如何创建一个解释输入字段的框？

Question

我想要一个非常类似于Ask Question页面上的框，它解释/说明应该在表单的每个字段中输入什么类型的数据。我试图在这个页面上“查看源代码”，但我根本无法做出正在发生的事情。有人可以解释一下，还是有可以使用的教程？

示例：

1. 当用户点击文字输入时，该框说明应该去哪里

2. 标有公司类型的下拉菜单，包含多种类型的公司。用户一直在错误分类，因为他们不了解每种类型所指的内容。当用户单击下拉菜单时，框中的文本将说明每种公司类型。

请参阅链接，了解表单部分的屏幕截图：http://imgur.com/TYOmT

我还想让盒子沿着表格移动（这样它总是位于用户正在使用的字段的右侧）

谢谢！

Answer 1

给出像这样的HTML：

    <form>
        <select name="some_name" id="some_name">
            <option value="option1" data-description="Description of option1">option1</option>
            <option value="option2" data-description="Description of option2">option2</option>
        </select>
    </form>
    <div id="description">
        Default Description
    </div>​

以下javascript将获取所选选项的data-description值，并使用它填充#description。

    var $description = $('#description');
    $('#some_name').on('change', function(event){
        var $option = $(event.currentTarget).find(':selected');
        $('#description').html($option.attr('data-description'));
    });

这里是working example。

您可以通过为每个输入创建额外的处理程序，或者为表单上的任何输入创建处理程序，轻松扩展它以创建可为每个特定输入提供更多信息的内容。

使用display:fixed或类似Twitter Bootstrap affix之类的内容，您可以通过多种不同方式修复说明。