Фокусировка при нажатии на внешний контейнер div

-1

У меня есть небольшой фрагмент кода, и я хотел знать, как это сделать, когда я нажимаю на внешнюю сторону div class="gutte", и этот div должен быть направлен на фокус. Я снизу свой код вниз, и это не фокус, когда я нажимаю вне div class="gutte" (или <body>), и я не могу использовать input type[text]. Когда я нажимаю на btn1 div class="gutte" фокус, но один я нажимаю на другую часть (в тексте типа ввода), он переходит в фокус. Как я могу это сделать? Я использую jQuery framework.Фокусировка при нажатии на внешний контейнер div

var tt = $.noConflict(); 
 
tt(document).ready(function($) { 
 
    $(".qta").focus(function() { 
 

 
    $(".gutt").css({ 
 
     'display': 'inline-block' 
 
    }); 
 
    $(".gutte").addClass('grandisciti'); 
 
    }); 
 

 
    $(".gutte").focusout(function() { 
 

 
    $(".gutt").css({ 
 
     'display': 'none' 
 
    }); 
 
    $(".gutte").removeClass('grandisciti'); 
 
    }); 
 
});

body { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-color: #c1c2c3; 
 
\t } 
 
\t .gutte { 
 
\t box-sizing: border-box; 
 
\t position: relative; 
 
\t display: block; 
 
\t width: 550px; 
 
\t height: 50px; 
 
\t background-color: #fff; 
 
\t color: #000; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t margin-left: 32%; 
 
\t margin-top: 30px; 
 
\t padding-top: 2.5px; 
 
\t padding-left: 1px; 
 
\t padding-bottom: 2px; 
 
\t border-radius: 10px; 
 
\t border-radius: 10px; 
 
\t text-align: center; 
 
\t } 
 
\t .ati { 
 
\t box-sizing: border-box; 
 
\t position: static; 
 
\t display: inline-block; 
 
\t width: 105px; 
 
\t height: 45px; 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
\t padding: 0px 10px; 
 
\t border: none; 
 
\t background-color: #ccc; 
 
\t /*border:2px solid #ccc;*/ 
 
\t border-radius: 10px; 
 
\t outline: none; 
 
\t cursor: pointer; 
 
\t transition: 0.8s all; 
 
\t font-size: 120%; 
 
\t color: #000; 
 
\t } 
 
\t .grandisciti { 
 
\t width: 600; 
 
\t height: 300px; 
 
\t -webkit-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5); 
 
\t -moz-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5); 
 
\t box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5); 
 
\t } 
 
\t .gutt { 
 
\t display: none; 
 
\t width: 530px; 
 
     margin:10px; 
 
\t background-color: #000; 
 
\t } 
 
\t .tref { 
 
\t display: inline-block; 
 
\t width: 80%; 
 
\t height: 100px; 
 
\t resize: none; 
 
\t outline: none; 
 
\t padding: 10px; 
 
\t margin: 15px; 
 
\t border: 5px solid #ccc; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
body 
 
<div tabindex="1" class="gutte"> 
 
    <div class="irj fjr_p05gure rddre "> 
 
    <button class="ati qta ">btn1</button> 
 
    <button class="ati ">btn2</button> 
 
    <button class="ati ">bt3</button> 
 

 
    </div> 
 
    <span class="gutt"> 
 
\t \t \t \t <input type="text" class="tref"/> 
 
    </span> 
 

 
</div>

источник

2015-11-16 Phoenix

http://stackoverflow.com/questions/ 1403615/потребительная JQuery к шкура-а-ДИВ-когда-заместитель пользователь щелкает-вне -of-it – epascarello

можно сделать код фрагмента, который работает так, как я спросил? – Phoenix

http://stackoverflow.com/questions/3314810/jquery-trigger-event-when-click-outside-the-element – Maksim

Когда вы сосредоточены в элементе, любой элемент, который сосредоточил сделать focusout, то целевой элемент делают сосредоточенным. См. Этот пример для лучшего понимания.

$("input").focus(function(){ 
 
    console.log(this.name + " focused"); 
 
}).blur(function(){ 
 
    console.log(this.name + " blured"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name="A" /> 
 
<input name="B" /> 
 
<input name="C" />

Вам нужно добавить focus событие в любой button, как это:

Ответ: Jsfiddle

источник

2015-11-25 14:01:22 Mohammad

PS: размытие и фокусировка ведут себя по-другому: размытие применим только к самому объекту, а фокусное изображение пузырится вверх: если одно из ваших полей ввода не имеет фокуса, содержащая DIV также запускает событие фокуса. – wintvelt

не работает. когда вы нажимаете на текстовую область, она выходит foucust – Phoenix

Jsfiddle обновляется. – Mohammad

Фокусировка при нажатии на внешний контейнер div

ответ

Смежные вопросы