如何在javascript中从焦点模糊事件中获取元素值

我想知道如何从焦点模糊事件中触发的元素（使用单击事件）中获取值。我创建了图标选择器，它与jQuery日期选择器类似。这里是代码，但当我单击图标时，日期选择器元素隐藏而不给出值

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>

更新

#iconPicker

是一个隐藏（显示：无）元素，用于选择图标。当用户关注

#contentIcon

输入字段时，它将显示，当触发模糊事件时，它将被隐藏。如果我删除

$（'#iconPicker'）.hide（）blur

偶数处理程序部分中设置code>（由于@Reddy，我格式化了此代码）

可触发，并将值置于

#contentIcon

输入字段。但是，

#iconPicker

没有隐藏。如果我使用

$（'#iconPicker'）.hide（）

在

中单击

事件处理程序，如果用户未选择图标，

#iconPicker

将不会隐藏

更新

---

这里的例子

试试这个；但是，您的代码有点不清楚

$("#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());
});

---

试试这个；但是，您的代码有点不清楚

$("#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());
});

---

您可以将代码重构为一行，如下所示。然而，这和你现在拥有的是一样的

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

$（this）.data（'value'）

是正确的方法，但是如果出于某种原因，这不适用于您，那么您可以使用

attr

获取任何属性值，如下所示

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

---

您可以将代码重构为一行，如下所示。然而，这和你现在拥有的是一样的

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

$（this）.data（'value'）

是正确的方法，但是如果出于某种原因，这不适用于您，那么您可以使用

attr

获取任何属性值，如下所示

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

---

我用工具解决这个问题。经过一些修改，这里的代码

PHP的

---

这里是。

我通过实现来解决这个问题。经过一些修改，这里的代码

PHP的

---

这是。

有人能格式化我的代码块吗。。我使用的是移动应用程序，无法从此应用程序格式化。有人可以格式化我的代码块吗。。我使用的是移动应用程序，无法从此应用程序格式化。

$(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();
});