Bootstrap 3으로 버튼이 눌리지 않게하는 방법

Bootstrap 3의 버튼을 클릭 한 후 자동으로 해제하려면 어떻게해야합니까?

내 문제를 재현하려면 몇 가지 버튼이있는 페이지를 만들고 적절한 부트 스트랩 클래스를 제공하고 부트 스트랩을 포함합니다.

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

페이지를로드하고 버튼 중 하나를 클릭합니다. 페이지의 다른 곳을 클릭 할 때까지 (FF29 및 chrome35beta 사용) 우울하고 강조 표시됩니다.

클릭하고 클릭하지 않은 상태에서 입력 요소를 검사하면 추가 클래스가 연결 및 제거되는 것을 표시하지 않습니다.

다음은 부트 스트랩 버튼이 눌려있는 예입니다. http://jsfiddle.net/52VtD/5166/

귀하의 예에서 버튼은 계속 눌려 있지 않습니다. 그들은 집중을 유지 합니다. 차이점을 확인하려면 다음을 수행하십시오.

1. 버튼을 클릭하고 있습니다.
2. 해제. 마우스를 놓으면 더 이상 눌리지 않기 때문에 버튼의 모양이 약간 변경되는 것을 볼 수 있습니다.

버튼을 놓은 후에도 버튼의 포커스를 유지하지 않으려면 마우스를 놓을 때마다 브라우저에서 포커스를 빼도록 지시 할 수 있습니다.

예

이 예제에서는 jQuery를 사용하지만 바닐라 JavaScript로 동일한 효과를 얻을 수 있습니다.

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

깡깡이

또는 정확히 동일한 스타일을 지정할 수있는 앵커 태그를 사용할 수 있지만 양식 요소가 아니기 때문에 포커스를 유지하지 않습니다.

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

여기에서 앵커 요소 섹션을 참조하십시오. http://getbootstrap.com/css/#buttons

버튼에 초점이 맞춰져 있습니다. 이를 효율적으로 제거하기 위해이 쿼리 코드를 프로젝트에 추가 할 수 있습니다.

$(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();
  });
});

내 선호 :

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

또는 각도 방법 :

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>

양식 요소 ( input) 이기 때문에 브라우저의 초점 입니다. 약간의 CSS로 쉽게 초점을 제거 할 수 있습니다.

input:focus {
    outline: 0;
}

다음은 귀하의 예가 담긴 바이올린입니다. http://jsfiddle.net/52VtD/5167/

편집하다

아, 방금 버튼 자체의 색상도 변하는 것을 보았습니다. 부트 스트랩 btn-default은이 CSS로 버튼 의 버튼을 변경합니다 .

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

이 동작을 원하지 않으면 CSS로 덮어 쓰십시오.

이것은 :active및 :focus요소 상태 와 관련이 있습니다 . 이러한 버튼의 상태에 대한 스타일을 수정해야합니다. 예를 들어 기본 버튼의 경우 :

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