Firefox中禁用元素的标题属性 [英] Title Attribute on Disabled Elements in Firefox

问题描述

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

I am building a very dynamic web-based application using a lot of Javascript to handle user events. I am in the process of making things a little more usable and came across a problem that I've never had before.

我正在使用jQuery，因此要考虑到你的答案。在此先感谢。

I am using jQuery, so factor that in to your answers. Thanks in advance.

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

I have a set of button elements defined as:

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

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

I have these buttons with a default style of:

div#option_buttons input {
     cursor: help;
}

然后，使用jQuery我运行像这样的点击事件选择框：

Then, using jQuery I run something like this as a click-event on a select box:

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');
    }
});

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

So, as you can see, when a column is selected in the select box (not shown here), I want the button to be enabled and behave like a button would (with my own click-events). But when a column is not selected (including the default load), I want the button disabled. The usability developer in me wanted to give the users subtle contextual clues as to what they can do to enable the button through the native rendering of the title attribute as a lightweight tooltip. I do this already in other areas of the application (this is a crazy beast of a project) and our usability tests have shown that the users are at least capable of recognizing that when the cursor changes to "help" that they can hover over the element and get some information about what is going on.

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

But this is the first time I've ever tried this with a form element. Apparently when I put disabled="disabled" in the element, it completely ignores the title attribute and will never display the tool tip.

现在，我知道我有一些选项（至少我能想到的）：

Now, I know I have a few options (at least the ones I could think of):

1. 编写我自己的自定义工具提示插件，它更加健壮。


2. 不要禁用该元素，而是将其设置为禁用。这是我最依赖的选项（在易于开发方面），但我讨厌必须这样做。


3. 将按钮保持为启用但不处理click事件。我不喜欢这个选项，因为我喜欢留下本地风格的东西，因为它们应该是逻辑上的。禁用按钮感觉最正确，禁用按钮的外观可立即识别为禁用按钮。

所以，所有这些，我错过了什么？我能做些什么容易的事情，我还没有想到？谷歌的搜索在这个话题上没有让我失望，所以我想我会在StackOverflow上抛弃这一点，以便对此有所了解。

So, with all that said, am I missing something? Is there something easy that I can do that I just haven't thought of? Google searches have failed me on this topic, so I thought I'd toss this out on StackOverflow to get some fresh eyes on this.

**编辑* *

我刚刚在同一个主题上发现了另一个StackOverflow问题，尽管那个人使用了一组描述他的问题的非常不同的术语（可能是为什么我没有'找到它。）

I just found another StackOverflow question on this same topic, though that person used a very different set of terms describing his problem (probably why I didn't find it).

问题的网址是： Firefox不会在禁用的输入字段上显示工具提示

该问题的两个答案都很漂亮好，虽然我想看看是否有人有任何其他建议。也许更具jQuery特定的东西？再次感谢。

Both of the answers on that question are pretty good, though I'd like to see if anyone has any other suggestions. Maybe something more jQuery specific? Thanks again.

推荐答案

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

There are several validation plugins that are very robust. You can find them in the jQuery plugins area.

你喜欢的另一种选择，我现在喜欢并且现在倾向于趋势是使用Tipsy插件。您可以在文本字段的右侧放置一些？图标，人们可以将鼠标悬停在它们上面以获得类似Facebook的工具提示。这个插件非常清晰，我强烈推荐它。

Another option for you though which I happen to love and tends to be trending now adays is using the "Tipsy" plugin. You can put little '?' icons to the right of your text fields and people can mouse over them to get a "facebook-like" tool tip. This plugin is very sharp and I highly recommend it.

祝你好运！

这篇关于Firefox中禁用元素的标题属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！