web-dev-qa-db-ja.com

Bootstrap 3でボタンが押し下げられたままになるのを止める方法

クリック後にBootstrap 3のボタンを自動的に押し下げるにはどうすればよいですか？

私の問題を再現するには、いくつかのボタンを持つページを作成し、それらに適切なbootstrapクラスを与えます（そしてブートストラップを含めます）：

<input id="one" type="button" class="btn btn-default" value="one">
<input id="two" type="button" class="btn btn-primary" value="two">

ページをロードし、ボタンのいずれかをクリックします。ページ上の別の場所をクリックするまで（FF29とchrome35betaを使用して）押し下げられて強調表示されます。

クリックおよびクリック解除中に入力要素を検査しても、追加および削除されている追加のクラスは表示されません。

Bootstrapボタンが押し下げられたままの例を次に示します。 http://jsfiddle.net/52VtD/5166/

htmlcsstwitter-bootstrap-3html-input
75
Robert Byers

あなたの例では、ボタンは押したままになりません。彼らはfocusedのままです。違いを確認するには、次の手順を実行します。

  1. ボタンをクリックしたままにします。
  2. リリース。マウスを離すと、ボタンが押されなくなるため、ボタンの外観がわずかに変化することがわかります。

ボタンを離した後にボタンのフォーカスを維持したくない場合は、マウスを離すたびにボタンからフォーカスを外すようブラウザに指示できます。

例

この例ではjQueryを使用していますが、Vanilla JavaScriptでも同じ効果を実現できます。

$(".btn").mouseup(function(){
    $(this).blur();
})

フィドル

94
abl

または、まったく同じスタイルを設定できるアンカータグを使用できますが、フォーム要素ではないため、フォーカスは保持されません。

<a href="#" role="button" class="btn btn-default">one</a>.

こちらのアンカー要素セクションをご覧ください： http://getbootstrap.com/css/#buttons

25
jme11

ボタンはフォーカスされたままです。これを効率的に削除するには、このクエリコードをプロジェクトに追加します。

$(document).ready(function () {
  $(".btn").click(function(event) {
    // Removes focus of the button.
    $(this).blur();
  });
});

これはアンカーリンクでも機能します

$(document).ready(function () {
  $(".navbar-nav li a").click(function(event) {
    // Removes focus of the anchor link.
    $(this).blur();
  });
});
10
chris31389

またはangular方法：

function blurElemDirective() {
  return {
    restrict: 'E',
    link: function (scope, element, attrs) {
      element.bind('click', function () {
        element.blur();
      });
    }
  };
}

app.directive('button', blurElemDirective);
app.directive('_MORE_ELEMENT_', blurElemDirective);

MORE_ELEMENTを他の要素に置き換えます。

または属性の方法：

function blurElemDirective() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element.bind('click', function () {
        element.blur();
      });
    }
  };
}

app.directive('blurMe', blurElemDirective);

次に、html要素に属性を追加します。blur-me

<button blur-me></button>
8
naorz

私の好み：

<button onmousedown="event.preventDefault()" class="btn">Calculate</button>
8
Drazen Bjelovuk

フォーム要素（input）であるため、ブラウザのフォーカスです。少しのCSSで簡単に焦点合わせを解除できます

input:focus {
    outline: 0;
}

ここにあなたの例のフィドルがあります： http://jsfiddle.net/52VtD/5167/

編集

ああ、今ではボタンの色も変わっているのを見ました。 Bootstrapは、たとえばこのcssを含むbtn-defaultボタン：

.btn-default:focus {
    color: #333;
    background-color: #ebebeb;
    border-color: #adadad;
}

この動作が望ましくない場合は、CSSで上書きしてください。

1
Anthony Weber

これは、:activeおよび:focus要素の状態に関係しています。これらのボタンの状態のスタイルを変更する必要があります。たとえば、デフォルトのボタンの場合：

.btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    color: #333;
    background-color: #ccc;
    border-color: #fff;
}
1
rnevius