html - बूटस्ट्रैप 3 से उदास रहने से बटन कैसे रोकें




css twitter-bootstrap-3 (5)

क्लिक करने के बाद स्वचालित रूप से बूटस्ट्रैप 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 का उपयोग करता है लेकिन आप वेनिला जावास्क्रिप्ट के साथ एक ही प्रभाव प्राप्त कर सकते हैं।

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

Fiddle


इसे इसके साथ करना है :active और :focus तत्व राज्य। इन बटनों के लिए आपको उन राज्यों के लिए शैलियों को संशोधित करने की आवश्यकता है। उदाहरण के लिए, डिफ़ॉल्ट बटन के लिए:

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

मेरी प्राथिमिकता:

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

यह ब्राउज़र का फोकस है क्योंकि यह एक फॉर्म तत्व ( input ) है। आप आसानी से थोड़ा सीएसएस के साथ ध्यान केंद्रित कर सकते हैं

input:focus {
    outline: 0;
}

यहां आपके उदाहरण के साथ बेवकूफ है: http://jsfiddle.net/52VtD/5167/

संपादित करें

आह, मैंने अभी देखा है कि बटन का रंग भी बदल जाता है। बूटस्ट्रैप इस सीएसएस के साथ आपके btn-default बटन के बटन को बदलता है:

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

यदि आप यह व्यवहार नहीं चाहते हैं, तो बस इसे अपने सीएसएस से ओवरराइट करें।


या कोणीय तरीका:

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

फिर अपने एचटीएमएल तत्व में विशेषता जोड़ें: धुंधला-मुझे

<button blur-me></button>




html-input