web-dev-qa-db-fra.com

La balise d'ancrage HTML doit-elle respecter l'attribut désactivé?

Si je crée une balise d'ancrage HTML et que je définis l'attribut disabled sur true, le comportement de chaque navigateur varie d'un navigateur à l'autre (surprise! Surprise!).

J'ai créé un violon pour démontrer.

Dans IE9, le lien est grisé et ne transfère pas à l'emplacement HREF . Dans Chrome/FF/Safari, le lien est la couleur normale et sera transféré à l'emplacement HREF.

Quel devrait être le comportement correct? IE9 rend-il cela de manière incorrecte et je devrais implémenter du CSS et du javascript pour résoudre ce problème; ou est-ce que Chrome/FF/Safari est incorrect et finira par rattraper son retard?

Merci d'avance.

htmlcross-browserinternet-explorer-9
26
David Hoerster

IE semble agir incorrectement dans ce cas.

Voir la spécification HTML5

L'attribut IDL désactivé ne s'applique qu'aux liens de la feuille de style. Quand le L'élément link définit un lien dans la feuille de style, puis l'attribut disabled se comporte comme défini pour les feuilles de style alternatives DOM. Pour tous les autres lier les éléments, il retourne toujours faux et ne fait rien sur le réglage.

http://dev.w3.org/html5/spec/Overview.html#the-link-element

La spécification HTML4 ne mentionne même pas disabled

http://www.w3.org/TR/html401/struct/links.html#h-12.2

MODIFIER

Je pense que la seule façon d'obtenir cet effet multi-navigateur est js/css comme suit:

#link{
    text-decoration:none;
    color: #ccc;
}

js

$('#link').click(function(e){
    e.preventDefault();
});

Exemple: http://jsfiddle.net/jasongennaro/QGWcn/

13
Jason Gennaro

Je devais résoudre ce problème dans un site comportant de nombreuses ancres activées/désactivées avec cet attribut en fonction d'autres conditions, etc. Peut-être pas idéal, mais dans une situation comme celle-là, si vous préférez ne pas corriger le code de chaque ancre individuellement, cela fera l'affaire pour toutes les ancres:

$('a').each(function () {
    $(this).click(function (e) {
        if ($(this).attr('disabled')) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }
    });
    var events = $._data ? $._data(this, 'events') : $(this).data('events');
    events.click.splice(0, 0, events.click.pop());
});

Et:

a[disabled] {
    color: gray;
    text-decoration: none;
}
13
hernant

disabled est un attribut qui ne s'applique qu'aux éléments input conformément aux standards . IE peut le prendre en charge sur a, mais vous préférerez utiliser CSS/JS si vous souhaitez être conforme aux normes.

9
Karmic Coder

La réponse de JQuery n'a pas fonctionné pour moi car ma balise d'ancrage se trouve sur un formulaire et j'utilise des validateurs de champ asp. Ils ne jouaient tout simplement pas à Nice. Cela m'a amené à trouver une réponse assez simple qui ne nécessite pas JQuery ou CSS ...

<a id="btnSubmit" href="GoSomePlace">Display Text</a>

Vous pouvez désactiver l'élément et il devrait se comporter comme les types d'entrée. Pas de CSS nécessaire. Cela a fonctionné pour moi en chrome et ff.

function DisableButton() {
    var submitButton = document.getElementById("btnSubmit");
    if (submitButton != null) {
        submitButton.setAttribute('disabled', 'disabled');
    }
}

Bien sûr, vous ferez une boucle pour désactiver toutes les balises d'ancrage dans le DOM, mais mon exemple montre comment le faire pour un seul élément spécifique. Vous voulez vous assurer d'obtenir le bon identifiant client de votre élément, mais cela a fonctionné pour moi, à plus d'une occasion. Cela fonctionnera également sur asp: LinkButtons qui deviennent des éléments de balise d'ancrage lors du rendu dans le navigateur.

1
Jabare Mitchell