Firefox中禁用元素的标题属性

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

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

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

 

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

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

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

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

现在,我知道我有几个选择(至少我能想到的):

  1. 编写我自己的自定义工具提示插件,它更加强大。
  2. 不要“禁用”元素,而是将其设置为禁用。 这是我最依赖的选项(在易于开发方面),但我讨厌必须这样做。
  3. 将按钮保持为已启用但不处理click事件。 我不喜欢这个选项,因为我喜欢留下本地风格的东西,因为它们应该是逻辑上的。 禁用按钮“感觉”最正确,禁用按钮的外观可立即识别为禁用按钮。

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

**编辑**

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

该问题的url是: Firefox不会在禁用的输入字段上显示工具提示

关于这个问题的两个答案都很不错,但我想看看是否有人有任何其他建议。 也许更具jQuery特定的东西? 再次感谢。

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

我喜欢的另一个选择,现在趋向于趋势,现在是使用“Tipsy”插件。 你可以放点’?’ 文本字段右侧的图标,人们可以将鼠标hover在它们上面,以获得“类似Facebook的”工具提示。 这个插件非常锋利,我强烈推荐它。

祝好运!

我有一个类似的问题,我只是包围另一个元素中的禁用元素并与该div交互,我使用tipTip显示禁用的工具提示复选框

 

我还没有测试是否能解决缺少标题的问题,但你也可以在$(document).ready()上使用jquery禁用按钮

问候,harpax

如果这不会完全破坏您的设计,您可以用“span”,“p”,…标签替换您的按钮,此处带有“我’有用’的文字。”

只有当用户进行正确的移动时才将其与按钮交换。