16

AngularおよびAngular UI-Bootstrap の使用。

textAngularにドロップダウン メニューを作成しました。テキストボックスまたはメニューオプションの1つ以外をクリックすると、メニューが無効になります。これは望ましい動作です。

ただし、 FireFoxを使用している場合、ドロップダウンを開くと、ユーザーがメニューを離れたかのように表示されます (メニューからドロップダウンを使用している場合でも)。助けがあれば、ドロップダウンがテキストボックスの後ろと横に開くようです。

この場合、写真は 1000 語に相当します。左がChrome (望ましい動作)、右がFirefox (望ましくない動作) です。埋め込み画像が小さすぎる場合はクリックしてください。

ここに画像の説明を入力

これがコードです。ツール登録の表示部分です。textangular に慣れていない方のために説明すると、ボタンを作成するコードは次のとおりです。

    display: '<span class="btn-group" dropdown dropdown-append-to-body style="padding: 0px 0px 0px 0px">' +
    '<button class="btn btn-default dropdown-toggle" dropdown-toggle type="button" ng-disabled="showHtml()">' +
    '   <span>Items Fields</span>' +
    '</button>' +
    '<ul class="dropdown-menu">' +
    '   <li ng-repeat="o in options">' +
    '       <a ng-click="action(o)">{{o.name}}</a>' +
    '   </li>' +
    '</ul>' +
    '</span>',

編集：

  1. 問題を再現する Plunker がアップされました: Clicky for plnkr (問題の焦点は「アイテム フィールド」ボタンです。Chrome では機能しますが、Firefox では機能しません。
  2. ブーム - 報奨金！

PSコードの量に惑わされないでください。関連する唯一の html は、taRegisterTool 'itemFields' の下の app.js ファイルにあります。

taRegisterTool('itemFields', {
            display:
4

4 に答える 4

8

FireFox では、ドロップダウンがフォーカスになります。FF の親要素の一部ではありません。Chrome はドロップダウンを要素の一部として扱います。

非常に古いFireFox バグが記録されており、状態がUNCONFIRMEDです。

タグのドロップダウン ボックスは、タグの親の子として扱われません

あなたのPlunkerの私のバージョンをチェックしてください:こちら

textAngular.min.jsを拡張しました。1481行目に時計があります

    angular.extend(g, angular.copy(c)), i.taToolbar && (g.toolbar =
     g.$parent.$eval(i.taToolbar)), i.taToolbarClass && (g.classes.toolbar =
     i.taToolbarClass), i.taToolbarGroupClass && (g.classes.toolbarGroup = 
     i.taToolbarGroupClass), i.taToolbarButtonClass && 
     (g.classes.toolbarButton = i.taToolbarButtonClass), 
     i.taToolbarActiveButtonClass && (g.classes.toolbarButtonActive = 
     i.taToolbarActiveButtonClass), i.taFocussedClass && (g.classes.focussed =
      i.taFocussedClass), g.disabled = !0, g.focussed = !1, g._$element = h, h[0].innerHTML = "", h.addClass("ta-toolbar " + g.classes.toolbar), 
     g.$watch("focussed", function() {

要素のフォーカス状態を表示する関数にログを配置しました

console.log(g.focussed);

FireFoxでは、ドロップダウンをクリックすると、

false

Chromeでは、ドロップダウンがクリックされたとき

false
true

Chromeには、まさにそのような問題を監視するパッチがあり、ドロップダウンがフォーカスを取得したときに親要素をフォーカスするように設定しているようです。

于 2015-07-20T19:51:16.893 に答える
5

シンプルなソリューション

できることは、使用しようとしているボタン グループから無効な属性を削除することです。それが Firefox でこの動作を引き起こしているようです。

$('body').on('click', '.ta-toolbar.btn-toolbar .btn-group', function(){
    $(this).removeAttr('disabled');
});

実際に自分の目で確かめてください。plnkr の更新: http://plnkr.co/edit/k7zI9G9078cAhShjz2l4?p=preview

于 2015-07-26T04:05:10.443 に答える
4

ワーキングソリューション

私は今それを完全に機能させ、さらに簡単な解決策を考えました。あなたの緑の機能で動作するドロップダウンをチェックしてください。ドロップダウンを開くことで、クリックによって発生した問題を回避します。より安全にするために、クリック機能を完全に無効にすることができます。

スタイルを追加:

<style>
    .dropdown-menu{
        margin-top: 0px;
    }
</style>

スクリプトを追加:

<script>
    $('body').on('mouseenter', '.ta-toolbar.btn-toolbar .btn-group', function(){
        $(this).addClass('open');
        $(this).children('button').css('pointer-events', 'none');
    });

    $('body').on('mouseleave', '.ta-toolbar.btn-toolbar .btn-group', function(){
        $(this).removeClass('open');
    });
</script>

作業中の Plnkr: http://plnkr.co/edit/7itorLFtKaxEgekGZU1B?p=preview

于 2015-07-28T03:49:29.873 に答える
1

難しいかもしれませんが、CSS のデフォルトをリセットしましたか? 私のプロジェクトでは、ブラウザー固有の CSS の既定値により、ブラウザーごとにマージンやパディングなどにばらつきが生じ、予測できない方法で要素が移動しました。

于 2015-07-22T16:38:16.220 に答える