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

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

---

또는 각도 방법 :

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_ 를 다른 요소로 바꿉니다 .

Or attribute way:

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

app.directive('blurMe', blurElemDirective);

Then add the attribute to your html element: blur-me

<button blur-me></button>

---

My preference:

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

---

This has to do with the :active and :focus element states. You need to modify the styles for those states for these buttons. For example, for the default button:

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

---

It's the browser's focus since it's a form element (input). You can easily remove the focusing with a little css

input:focus {
    outline: 0;
}

Here's the fiddle with your example: http://jsfiddle.net/52VtD/5167/

EDIT

Ah, I just saw now that the colour of the button itself changes too. Bootstrap changes the button of e.g. your btn-default button with this css:

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

If you don't want this behaviour, just overwrite it with your css.

참고URL : https://stackoverflow.com/questions/23443579/how-to-stop-buttons-from-staying-depressed-with-bootstrap-3