Titre Attribute sur Désactivé Éléments dans Firefox

Question

Je construis une application web très dynamique en utilisant beaucoup de Javascript pour gérer les événements utilisateur. Je suis en train de faire les choses un peu plus facile à utiliser et suis tombé sur un problème que je ne l'ai jamais eu auparavant.

J'utilise jQuery, donc facteur dans vos réponses. Merci à l'avance.

I ai un ensemble d'éléments de touches définies comme:

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

J'ai ces boutons avec un style par défaut:

div#option_buttons input {
     cursor: help;
}

Ensuite, en utilisant jQuery je lance quelque chose comme ceci comme un clic-événement sur une boîte de sélection:

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

Donc, comme vous pouvez le voir, lorsqu'une colonne est sélectionnée dans la zone de sélection (non représenté ici), je veux que le bouton doit être activé et se comporter comme un bouton serait (avec mes propres événements de clic-). Mais quand une colonne est pas sélectionnée (y compris la charge par défaut), je veux que le bouton désactivé. Le développeur de la facilité d'utilisation en moi a voulu donner aux utilisateurs subtils indices contextuels quant à ce qu'ils peuvent faire pour activer le bouton par le rendu natif de l'attribut title sous forme d'infobulle légère. Je le fais déjà dans d'autres domaines de l'application (ce qui est une bête folle d'un projet) et nos tests d'utilisation ont montré que les utilisateurs sont au moins capables de reconnaître que lorsque le curseur change pour « aider » qu'ils peuvent planer sur la élément et obtenir des informations sur ce qui se passe.

Mais c'est la première fois que j'ai jamais essayé cela avec un élément de forme. Apparemment, quand je mets disabled = « disabled » dans l'élément, il ignore complètement l'attribut title et ne sera jamais afficher l'infobulle.

Maintenant, je sais que j'ai quelques options (au moins ceux que je pouvais penser):

1. Ecrire mon propre plug-in qui est un peu plus robuste pointe de l'outil personnalisé.
2. Ne pas « désactiver » l'élément, mais le style comme personnes handicapées. Ce fut l'option que je penchais sur le plus (en termes de facilité à développer) mais je déteste avoir à le faire.
3. Laissez le bouton comme activé mais ne traite pas l'événement click. Je n'aime pas cette option autant parce que j'aime laisser les choses comme ils nativement style devraient logiquement être. Un bouton désactivé « se sent » le plus correct et l'apparence d'un bouton désactivé est immédiatement reconnaissable comme un bouton désactivé.

Alors, avec tout ce que dit, que je manque quelque chose? Y at-il quelque chose de facile que je peux faire que je viens pas pensé? les recherches Google me ont échoué sur ce sujet, donc je pensais que je serais toss cela sur StackOverflow pour obtenir des yeux frais à ce sujet.

** ** Modifier

Je viens de découvrir une autre question StackOverflow sur ce même sujet, si cette personne a utilisé un ensemble très différent de termes décrivant son problème (sans doute pourquoi je ne trouve pas).

L'URL à la question est: Firefox ne montre pas infobulles sur les champs d'entrée handicapés

Les deux réponses sur cette question sont assez bien, mais je voudrais voir si quelqu'un a d'autres suggestions. Peut-être quelque chose de plus spécifique jQuery? Merci encore.

Answer 1

Il y a plusieurs plugins de validation qui sont très robustes. Vous pouvez les trouver dans la zone de plugins jQuery.

Une autre option pour vous si ce que je suis d'aimer et a tendance à être une tendance maintenant adays utilise le plug-in « Tipsy ». Vous pouvez mettre peu '? icônes à droite de vos champs de texte et les gens peuvent la souris sur eux pour obtenir une infobulle « facebook-like ». Ce plugin est très forte et je le recommande vivement.

Bonne chance!

Answer 2

J'ai eu un problème similaire et je viens entouré l'élément désactivé dans un autre élément et avec cette div interagi, j'utilisais TipTip pour afficher l'info-bulle pour case non cochée

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

Answer 3

Je ne l'ai pas testé si cela permet de résoudre ou non le problème avec le titre manquant, mais vous pouvez également désactiver le bouton (s) en utilisant jquery sur $(document).ready()

Cordialement, Harpax

Answer 4

Si cela ne casse pas votre conception tout à fait, vous pouvez remplacer votre bouton par un « span », « p », ... tag avec « Mon texte « utile » ici. »

Et échanger avec le bouton uniquement lorsque l'utilisateur fait le mouvement correct.