Question

我如何使用特征检测来确定是否需要在禁用的输入元素上模拟title属性。

我知道firefox声称＆amp;解释规范，使其按预期工作，但我更喜欢显示工具提示。

我唯一能想到的是直接使用浏览器检测。

此处可以看到问题的示例http://jsfiddle.net/Raynos/xQyBR/

var con = $("#Con");

var b1 = $("<input>").attr({
    "id": "b1",
    "title": "Some Other Text",
    "type": "button",
    "value": "b1"  
}).appendTo(con);

con.append($("<br>"));

var b2 = $("<input>").attr({
    "id": "b2",
    "title": "Some text",
    "type": "button",
    "value": "b2",
    "disabled": true
}).appendTo(con);


var detected = $("input:disabled[title]");
console.log(detected);

使用jQuery是可以接受的。

Answer 1

嗯，没有特征检测（afaik）。但您可能希望使用透明的div叠加解决此问题。

示例：http://jsfiddle.net/xQyBR/19/

插件示例：http://jsfiddle.net/xQyBR/24/

这样，无论如何它都将是跨浏览器兼容的。

Answer 2

模拟标题的更好解决方案是仅使用CSS。 :after和:hover的组合可让您动态创建工具提示，并且不会中断input.disabled的使用

http://jsfiddle.net/Raynos/cgYgR/

功能检测firefox怪癖，标题属性未显示在禁用的元素上

2 个答案: