javascript - 使用 Tab 键时所有占位符都会消失

Question

    case 'input':
                        echo '<div class="col-md-3">
                                <div class="placeholder">
                                <img src="images/person.png" />
                                <span class="placeholder-text">First name </span>
                                </div>
                                <input type="text" id="adi" name="adi"/>
                            </div>';
                    break;
                    case 'input1':
                        echo '<div class="col-md-3">
                                <div class="placeholder">
                                <img src="images/person.png" />
                                <span class="placeholder-text">Last name</span>
                                </div>
                                <input type="text" id="soyadi" name="soyadi"/>
                            </div>';
                    break;





    $(function () {
    $("input").on("blur", function () {
        var elem = $(this).parent().find(".placeholder");
        $(this).val() == "" ? elem.show() : elem.hide();
    });
    $(".placeholder").on("click", function () {
        $(this).hide();
        $(this).parent().find("input").focus();
    });

    $(window).keyup(function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 9 && $('#adi:focus').length) {
            $("input").parent().find(".placeholder");
            $(".placeholder").hide();       
        }
        if (code == 9 && $('#soyadi:focus').length) {
            $("input").parent().find(".placeholder");
            $(".placeholder").hide();
        }
    });

});

我有一个带有两个 html 输入文本字段的表单。

我希望使用 Tab 键时占位符消失。但是当我使用 Tab 键时，所有占位符都会消失。有什么建议吗？

Answer 1

    $("input").parent().find(".placeholder");
    $(".placeholder").hide();

这两条线都已关闭。 第一个并没有真正做任何事情，但我认为你的逻辑是错误的。首先，它找到所有 <input>标签，然后查看父节点，然后在父节点下找到所有 .placeholder s，然后对它们不执行任何操作。

第二行查找并隐藏所有 .placeholder s。

您正在寻找的内容可能如下所示:

$('#soyadi:focus').parent().find('.placeholder').hide();

或者

$('#soyadi:focus').closest('.placeholder').hide();

不同之处在于你的$('.placeholder').hide()找到所有这些，而这两个中的任何一个都会找到最接近它的一个并只隐藏那个。