Firefox 中禁用元素的标题属性答案

【问题标题】：Title Attribute on Disabled Elements in FirefoxFirefox 中禁用元素的标题属性
【发布时间】：2011-01-07 10:33:50
【问题描述】：

我正在使用大量 Javascript 来构建一个非常动态的基于 Web 的应用程序来处理用户事件。我正在使事情变得更有用，但遇到了一个我以前从未遇到过的问题。

我正在使用 jQuery，因此请考虑到您的答案。提前致谢。

我有一组按钮元素定义为：

<input type="button" title="My 'useful' text here." disabled="disabled" />

我有这些按钮的默认样式：

div#option_buttons input {
     cursor: help;
}

然后，我使用 jQuery 在选择框上运行类似的点击事件：

window.current_column = '';
$('select.report_option_columns').live('click', function() {
    var column = $(this).val();
    if ( column == window.current_column ) {
        // clear our our previous selections
        window.current_column = '';
        // make this option no longer selected
        $(this).val('');

        $('div#option_buttons input').attr('disabled','disabled');
        $('div#option_buttons input').attr(
            'title',
            'You must select a column from this list.'
        );
        $('div#option_buttons input').css('cursor', 'help');
    } else {
        window.current_column = column;
        $('div#option_buttons input').attr('disabled','');
        $('div#option_buttons input').attr(
            'title',
            'Add this option for the column "' + column + '"'
        );
        $('div#option_buttons input').css('cursor', 'default');
    }
});

因此，如您所见，当在选择框中选择一列时（此处未显示），我希望启用按钮并像按钮一样运行（使用我自己的点击事件）。但是当未选择列时（包括默认加载），我希望禁用该按钮。我的可用性开发人员希望为用户提供微妙的上下文线索，了解他们可以做些什么来通过标题属性的原生呈现作为轻量级工具提示来启用按钮。我已经在应用程序的其他区域这样做了（这是一个疯狂的项目），我们的可用性测试表明，用户至少能够认识到当光标变为“帮助”时，他们可以将鼠标悬停在元素并获取有关正在发生的事情的一些信息。

但这是我第一次尝试使用表单元素。显然，当我在元素中添加 disabled="disabled" 时，它会完全忽略 title 属性并且永远不会显示工具提示。

现在，我知道我有几个选择（至少是我能想到的）：

编写自己的自定义工具提示插件，功能更强大。
不要“禁用”该元素，而是将其设置为禁用。这是我最依赖的选项（就易于开发而言），但我讨厌这样做。
让按钮保持启用状态，但不处理点击事件。我不太喜欢这个选项，因为我喜欢让事物保持自然风格，因为它们应该是合乎逻辑的。禁用按钮“感觉”最正确，并且禁用按钮的外观可以立即识别为禁用按钮。

那么，说了这么多，我是不是错过了什么？有什么简单的事情我可以做，我只是没有想到？谷歌搜索在这个话题上让我失望了，所以我想我应该把它扔到 StackOverflow 上，以便对这个有新的认识。

**编辑**

我刚刚发现了关于同一主题的另一个 StackOverflow 问题，尽管那个人使用了一组非常不同的术语来描述他的问题（可能是我没有找到它的原因）。

问题的网址是：Firefox does not show tooltips on disabled input fields

关于这个问题的两个答案都很好，不过我想看看是否有人有任何其他建议。也许更具体的jQuery？再次感谢。

【问题讨论】：

从 Firefox 8 开始，禁用元素的标题会在悬停时显示。

标签： javascript jquery html title disabled-input

【解决方案1】：

我遇到了类似的问题，我只是将禁用的元素包围在另一个元素中并与该 div 交互，我使用tipTip 来显示禁用复选框的工具提示

<div style="cursor: pointer;" class="disabled" title="Do something to make it work" >   
        <input disabled="disabled" type="checkbox">
</div>

【讨论】：

【解决方案2】：

有几个非常强大的验证插件。您可以在 jQuery 插件区找到它们。

我碰巧喜欢并且现在趋于流行的另一种选择是使用“Tipsy”插件。你可以把小'？文本字段右侧的图标，人们可以将鼠标悬停在它们上以获得“类似facebook”的工具提示。这个插件非常锋利，我强烈推荐它。

祝你好运！

【讨论】：

【解决方案3】：

我尚未测试这是否解决了缺少标题的问题，但您也可以在 $(document).ready() 上使用 jquery 禁用按钮

问候，竖琴

【讨论】：

不。那不行。根据另一个 SO question 的答案之一，这是一个尚未修复的实际 Mozilla Firefox 错误。我很想提交一个补丁来修复它，但我的工作存在于一个 Intranet 上，这就像，在我的用户获得更新之前 6 年...... :( 我想现在我只是在寻找最好、最干净的解决方法。
公平地说，Mozilla 的规范只是说你不应该与禁用的元素进行交互，不能有点击和悬停事件等等。虽然工具提示可能很好，这也使禁用的元素具有可能不应该的行为。

【解决方案4】：

如果这不会完全破坏您的设计，您可以将按钮替换为“span”、“p”、... 标记为“我的‘有用’文本在这里。”

只有当用户做出正确的动作时，它才与按钮交换。

【讨论】：