如何從javascript中的焦點模糊事件中獲取元素值

Question

我想知道如何從焦點模糊事件中觸發的元素（使用點擊事件）獲取價值。 我創建了像jQuery datepicker一樣的圖標選擇器。 這里的代碼，但是當我點擊圖標時，日期選擇器元素隱藏而不給出值。

PHP代碼

<input id="contentIcon" class="form-control" type="text" name="content_icon" placeholder="pilih icon"/>
<div id="iconPicker" class="iconpicker dropdown-menu">
    <div class="iconpicker-wrapper">
        <table class="dt-icons">
        <?php
        foreach (array_chunk($icons, 5, true) as $icon_cunk) {
            echo '<tr>';
            foreach($icon_cunk as $key => $ico) {
                echo '<td data-value="'. $key .'"><i class="' . $key .'"></i></td>';
            }
            echo '</tr>';
        }
        ?>
        </table>
    </div>
</div>

使用Javascript

$("#contentIcon").keypress(function (e) {
    e.preventDefault();
});

$(document).on('click', '#iconPicker table.dt-icons td', function () {
    $('#contentIcon').empty();
    var _dtself = $(this);
    document.getElementById("contentIcon").value = _dtself.data('value');
});

$('#contentIcon').focus(function() {
    $('#iconPicker').show();            
}).blur(function() {
    $('#iconPicker').hide();
});

更新

#iconPicker是一個隱藏（display：none）元素，用於選擇圖標。 用戶專注於#contentIcon輸入字段時會顯示，並在觸發模糊事件時隱藏。 如果我刪除$('#iconPicker').hide(); 在blur甚至處理程序部分，然后（我格式化此代碼，感謝@Reddy）

$(document).on('click', '#iconPicker table.dt-icons td', function () {
    $("#contentIcon").val($(this).data('value'));
});

可以觸發並將值放在#contentIcon輸入字段中。 但是， #iconPicker沒有隱藏回來。 如果我使用$('#iconPicker').hide(); 在click事件處理程序中，如果用戶不選擇圖標，則#iconPicker將不會隱藏。

更新

這里是jsfiddle.net的例子

Answer 1

嘗試這個; 但是，您的代碼有點不清楚。

$("#contentIcon").keypress(function (e) {
    e.preventDefault();
});

$(document).on('click', '#iconPicker table.dt-icons td', function () {
    $('#contentIcon').empty();
    var _dtself = $(this);
    document.getElementById("contentIcon").value = _dtself.data('value');
});

$('#contentIcon').focus(function() {
    $('#contentIcon').show();
    console.log($('#iconPicker').val());            
}).blur(function() {
    $('#contentIcon').hide();
    console.log($('#iconPicker').val());
});

Answer 2

您可以將代碼重構為單行，如下所示。 然而，這與你現在擁有的相同。

$(document).on('click', '#iconPicker table.dt-icons td', function () {
  $("#contentIcon").val($(this).data('value'));
});

$(this).data('value')是正確的方法，但如果由於某種原因這不適合你，那么你可以使用attr獲取任何屬性值，如下所示

$(this).attr('data-value')

Answer 3

我通過實現@CMS的回答來解決這個問題。 這里有一些修改代碼。

PHP的

<input id="contentIcon" class="form-control" type="text" name="content_icon" placeholder="pilih icon"/>
<div id="iconPicker" class="iconpicker dropdown-menu">
    <div class="iconpicker-wrapper">
        <table class="dt-icons">
            <?php
            $a = 0;
            foreach (array_chunk($icons, 5, true) as $icon_cunk) {
                echo '<tr>';
                foreach($icon_cunk as $key => $ico) {
                    if ($a == 0) {
                        echo '<td><a class="action-placement choosed-icon" data-value="'. $key .'"><i class="icon-placement ' . $key .'"></i></a></td>';
                    }else {
                        echo '<td><a class="action-placement" data-value="'. $key .'"><i class="icon-placement ' . $key .'"></i></a></td>';
                    }
                    $a++;
                }
                echo '</tr>';
            }
            ?>
        </table>
    </div>
</div>

JavaScript的

$(document).on('keypress keydown', '#contentIcon', function (e) {
    e.preventDefault();
});

document.onclick = function (e) {
    e = e || window.event;
    var element = e.target || e.srcElement;

    if (element.id !== "contentIcon" && element.tagName !== "A" && element.className !== "action-placement" 
            && element.tagName !== "I" && element.className !== "icon-placement") {
        $('#iconPicker').hide();
    }
};

$(document).on('click', '#iconPicker table.dt-icons td a', function () {
    $(".choosed-icon").removeClass("choosed-icon");
    $(this).attr("class", "choosed-icon");

    $("#contentIcon").val($(this).data('value'));
});

$('#contentIcon').on('click', function () {
    $('#iconPicker').show();
    $('#iconPicker').focus();
});

在這里演示 。