如何去關於重點事件點擊事件

Question

我想要的是當我的輸入框增益focus並能夠選擇一個值並填充文本框時顯示hidden div。 然後使顯示的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(); 
}); 

on click r探索元素的價值。 並插入它具有您輸入的值。 （然後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

你能更好的描述你想與鼠標按下做什麼？你的問題是當輸入獲得焦點時如何顯示框，以及如何從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/