Firefox の無効な要素のタイトル属性

StackOverflow https://stackoverflow.com/questions/2104318

質問

ユーザーイベントを処理するために多くの Javascript を使用して、非常に動的な Web ベースのアプリケーションを構築しています。私は物事をもう少し使いやすくする過程にあり、これまで経験したことのない問題に遭遇しました。

私は jQuery を使用しているので、それを回答に考慮してください。前もって感謝します。

次のように定義された一連のボタン要素があります。 

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

これらのボタンのデフォルトのスタイルは次のとおりです。

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

したがって、ご覧のとおり、選択ボックス (ここには表示されていません) で列が選択されると、ボタンが有効になり、(独自のクリック イベントを使用して) ボタンと同じように動作するようにします。ただし、列が選択されていない場合 (デフォルトのロードを含む)、ボタンを無効にしたいと思います。私のユーザビリティ開発者は、タイトル属性を軽量のツールチップとしてネイティブにレンダリングすることで、ボタンを有効にするために何ができるかについて、コンテキストに応じた微妙な手がかりをユーザーに提供したいと考えていました。私はこれをアプリケーションの他の領域で既に実行しています (これはプロジェクトのとんでもない野獣です)。ユーザビリティ テストでは、カーソルが「ヘルプ」に変わったときにカーソルをその上に移動できることをユーザーが少なくとも認識できることがわかりました。要素を選択して、何が起こっているかに関する情報を取得します。

しかし、フォーム要素でこれを試したのはこれが初めてです。どうやら、要素にdisabled="disabled"を入れると、title属性が完全に無視され、ツールチップが表示されなくなります。

さて、いくつかの選択肢があることがわかりました (少なくとも私が思いつくものは):

  1. もう少し堅牢な独自のカスタム ツール チップ プラグインを作成します。
  2. 要素を「無効」にせず、無効としてスタイル設定します。これは私が (開発の容易さの点で) 最も頼りにしていたオプションでしたが、これを行わなければならないのは嫌いです。
  3. ボタンは有効のままにしておきますが、クリック イベントは処理しません。私は論理的にあるべきネイティブスタイルのままにしておくのが好きなので、このオプションはあまり好きではありません。無効なボタンが最も正しく「感じられ」、無効なボタンの外観は無効なボタンであるとすぐに認識できます。

さて、そうは言っても、私は何かを見逃しているでしょうか？私が思いつかなかっただけで、簡単にできることはありますか？このトピックについて Google 検索ではうまくいかなかったので、このトピックについて新たな視点を得るために StackOverflow にこれを投げてみようと思いました。

**編集**

同じトピックに関する別の StackOverflow の質問を見つけましたが、その人は問題を説明する非常に異なる用語を使用していました (おそらく私がそれを見つけられなかったのはそのためです)。

質問のURLは次のとおりです。 Firefox では無効になっている入力フィールドにツールチップが表示されません

この質問に対する答えはどちらも非常に良いものですが、他に何か提案があるかどうかを確認したいと思います。おそらくもっと jQuery に特化したものでしょうか?再度、感謝します。

役に立ちましたか？

解決

非常に強固であり、いくつかの検証プラグインがあります。あなたはjQueryのプラグインエリアにそれらを見つけることができます。

私は愛に起こるとadays今トレンドする傾向たけれどもあなたのための別のオプションは、「ほろ酔い」プラグインを使用しています。あなたは少しを置くことができます「？」あなたのテキストフィールドと人々の右にあるアイコンは、それらの上にマウスは、「フェイスブックのような」ツールチップを取得することができます。このプラグインは非常にシャープであると私は非常にお勧めます。

グッドラック！

他のヒント

私は同様の問題があったと私は別の要素で無効要素を囲まれ、そのdiv要素と相互作用し、私は

無効のチェックボックスのツールチップを表示するtipTipを使用していました 
<div style="cursor: pointer;" class="disabled" title="Do something to make it work" >   
        <input disabled="disabled" type="checkbox">
</div>

私は解き行方不明のタイトルに問題がありますが、無効にもできたボタン（s）は$(document).ready()

上のjQueryを使用していることかどうかをテストしていません

について、 harpax

それは完全にあなたのデザインを壊していない場合は、「スパン」で、あなたのボタンを置き換えることができ、「P」、...とタグ「ここに私の 『便利』テキスト。」

そして、ユーザが正しい動きを作るときにのみ、ボタンでそれを交換します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top