如何从 javascript 中的 focus-blur 事件获取元素值

Question

我想知道如何从焦点模糊事件中触发的元素（使用点击事件）获取值。我创建了类似于 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>

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为隐藏（显示：none）元素，用于选择图标。它会在用户关注 #contentIcon 输入字段时显示，并在触发模糊事件时隐藏。如果我在 blur 甚至处理程序部分中删除 $('#iconPicker').hide();，那么（我格式化这段代码，感谢@Reddy）

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

可以触发并将值放入 #contentIcon 输入字段。但是，#iconPicker没有隐藏回来。如果我在 click 事件处理程序中使用 $('#iconPicker').hide();，如果用户不选择图标，#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' answer解决了这个问题。在此处对代码进行一些修改。

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

这里是demo.

如何从 javascript 中的 focus-blur 事件获取元素值

how to get element value from focus-blur event in javascript

javascript

picker