Как перейти на событие «Событие в фокусе» Событие

Question

Я хочу, чтобы div отображался каждый раз, когда мой поле ввода получает focus и может выбрать значение и заполнить текстовое поле. Затем сделайте отображаемый div fadeOut.

<div class='_date'> 
    <div class='birth_date'> 
     <p class='year'>1970</p> 
     <p class='year'>1971</p> 
     <p class='year'>1972</p> 
    </div> 
</div> 
<input type='text' name='date_year' id = 'birth_year'> 

JQuery:

$('.birth_date').hide(); 
$('body').on('focus', '#birth_year' ,function (e) { 
    $('.birth_date').show(); 
    //this is where my click event comes in... 
}) 

Как добиться этого bubbles в моей голове, и я немного запутался о том, как попробовать его.

Смотрите рисунок ниже:

Answer 1

$('.birth_date').hide(); 
$(document).on('focus', '#birth_year' ,function (e) { 
    $('.birth_date').show(); 
}); 

при нажатии кнопки r etrieve значение элемента. и введите его значение. (затем fadeOut)

click() Отключить is.(":focus"), mousedown() нет. Таким образом, вы можете проверить, продолжает ли пользователь фокусировать хороший ввод, когда он нажимает .year.

$('.year').mousedown(function(){ 
    if ($('#birth_year').is(":focus")) { 
     var year = $(this).html(); 
     $('#birth_year').val(year); 
     $('.birth_date').fadeOut(); 
    } 
}); 

Редактировать: хорошо, вы также можете проверить фокус. Подобно тому, что вы заполняете и скрываете ввод, только если фокус на нем.

Answer 2

var highlightedyear = $('.year').val(); 
$('#birthyear').html(highlightedyear); 

, который дает вам изначально выбранное значение, то, как она меняется ....

$('.year').on('change', function(){ 
var highlightedyear = $('.year').val(); 
$('#birthyear').html(highlightedyear); 
}); 

, но я хотел бы дать мульти входной селектор ап ID вместо выбора по классам

Answer 3

что-то вроде этого, может быть,

<div id="content"> 
<div class='_date'> 
    <div class='birth_date'> 
     <p class='year'>1970</p> 
     <p class='year'>1971</p> 
     <p class='year'>1972</p> 
    </div> 
</div> 
    <input type='text' name='date_year' id = 'birth_year' /> 
</div> 

$('#birth_year').mousedown(function (e) { 
    $('._date').show(); 
}); 


$('.year').click(function(){ 
    $('#birth_year').val($(this).text()); 
    $('._date').hide(); 
}); 

http://jsfiddle.net/mig1098/wgLgcdt2/

Answer 4

Вы можете быть более описательный, что вы хотите сделать с MouseDown? Ваш вопрос спрашивает, как отображать окно, когда ввод получает фокус и как получить клик изнутри div (или, может быть, я что-то не понимаю). Это покажет год DIV, когда вход получает фокус:

$(function() { 
    $(".birth_date").hide(); 
    $("#birth_year").on("focus", function (e) { 
     $(".birth_date").show(); 
     this.blur(); 
    }); 
    $(".year").on("click", function (e) { 
     $("#birth_year").val($(this).html()); 
     $(".birth_date").fadeOut(); 
    }); 
}); 

HTML:

<div class='_date'> 
    <div class='birth_date'> 
     <p class='year'>1970</p> 
     <p class='year'>1971</p> 
     <p class='year'>1972</p> 
     <p class='year'>1973</p> 
     <p class='year'>1974</p> 
     <p class='year'>1975</p> 
     <p class='year'>1976</p> 
     <p class='year'>1977</p> 
     <p class='year'>1978</p> 
    </div> 
    <input readonly type='text' name='date_year' id = 'birth_year' /> 
</div> 

Рабочий пример: http://jsfiddle.net/Lh9s6x6o/1/