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()找到了所有这些，而这两个中的任何一个都会找到最接近它的那个并且只隐藏那个。

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

1 个答案: