JQuery, как держать фокус на дочерних элементах внутри обертки div?

Question

У меня есть обертка div и 3 элемента ввода (ввод текста и кнопки + количества) внутри него. Структура HTML выглядит следующим образом:

<div id="total_text" style="display:none;" class="total_price_txt">Total price: 
<div id="total_price" class="total_price">$0.00</div> 
</div> 

<div id="wrapper"> 
    <input id="plus"></input> 
    <input id="text"></input> 
    <input id="minus"></input> 
</div> 

И JQuery код slideOut общую сумму на фокус ввода:

$('#wrapper').on('focusin',function(e){ 
$("#product_wrapper").addClass("jquery_product"); 
$('#total_text').slideDown(400); 

}); 

$('#wrapper').on('focusout',function(e){ 
$("#product_wrapper").removeClass("jquery_product"); 
$('#total_text').slideUp(400); 
}); 

$('#amount_input').on('change paste keyup',function(e){ 
var filterPrice=$('#product_price').text().replace(/[^0-9.]+/gi, ''); 
var price=parseFloat(filterPrice, 10); 
var inputAmount = $('#amount_input').val(); 
var total = (inputAmount*price).toFixed(2); 
$('#total_price').html("<div class='total_price'>$" +total+ "</div>"); 
}); 

Это своего рода работает, но проблема в том, что, когда я вхожу ввод в текстовое поле и хотите изменить его с помощью любого из + - боксов, которые он скользит вверх и вниз. И это происходит каждый раз, когда я переключаюсь между любыми этими входами. Я бы хотел, чтобы он сосредоточился на полной обертке div, независимо от того, какой из этих входов находится в фокусе, пока сама оболочка не находится в фокусе.

Answer 1

Я думаю, что это может делать то, что вам нужно: http://jsfiddle.net/1zojf2L1/

Просто .stop(true, false) анимация в focusin.

$('#wrapper').on('focusin',function(e){ 
    $("#product_wrapper").addClass("jquery_product"); 
    $('#total_text').stop(true, false).slideDown(400); 
}); 

$('#wrapper').on('focusout',function(e){ 
    $("#product_wrapper").removeClass("jquery_product"); 
    $('#total_text').slideUp(400); 
}); 

Answer 2

Не можете ли вы получить тот же визуальный эффект фокусировки фокуса, чтобы работать над этим оберткой div на основе мыши? который должен оставаться постоянно активным до тех пор, пока мышь находится в области div?

Или это слишком cahotic пользовательский опыт?

Если это так, вы все равно можете попытаться обойтись, получив эффект «мышь» только после того, как любое из этих полей ввода перенесет первый эффект фокусировки.

И когда мышь покидает область погружения обертки, вы снимаете эффект мыши.

Итак, в этом случае мышь в области ter div - ничего не происходит. Вы отмечаете одно из полей ввода, которое дает фокус, чтобы вы активировали эффект мыши, который дает вам текущий фокус в слайде.

Вы продолжаете ничего не менять. Мышь выходит из региона, вы снимаете эффект наведения мыши - выполняете текущую фокусировку?

Что-то в этом роде.

Отношения.

Answer 3

Я бы, вероятно, отобразил div на total_text, а затем прослушал щелчок за пределами этого div, чтобы снова закрыть его.

$('#wrapper').on('click',function(){ 
 
    $('#total_text').slideDown(400); 
 
}); 
 

 
$(document).on('click',function(e){ 
 
    if(! $("#" + e.target.id).parents().is("#wrapper")){ 
 
    $('#total_text').slideUp(400); 
 
    } 
 
});

#total_text{ 
 
    display: none; 
 
}

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

 
<div id="total_text">Hello</div> 
 
<div id="wrapper"> 
 
    <input id="plus"></input> 
 
    <input id="text"></input> 
 
    <input id="minus"></input> 
 
</div>

НТН