Question

我想要的是每当我的输入框获得hidden时显示focus 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，我对如何尝试它感到困惑。

见下图： enter image description here

Answer 1

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

单击

检索元素的值。并插入它具有您输入的值。（然后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

这样的事可能

<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 3

你能更好地描述你想用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/

Answer 4

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

为您提供最初选择的值，然后随着它的变化....

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

但我会给多输入选择器一个ID，而不是按类

选择

如何在焦点事件下点击事件

4 个答案: