Question

在下面的简化示例中，我使用绝对定位将标签放置在输入元素内。我使用JavaScript使标签根据焦点/模糊而缩小或增长。这可以按预期工作。

我的问题：如果我单击文本标签，它将阻止焦点在输入元素上，并且标签不会收缩。如果我单击该元素内的其他任何位置，它将按预期工作。我尝试了Z-index -1将标签放在输入框的后面，但是并不能解决问题。我也尝试过user-select: none，但是它仍然阻碍了对输入元素的关注。有没有办法阻止标签阻塞输入元素？

document.querySelector('input').addEventListener('focus', labelShrink);
document.querySelector('input').addEventListener('blur', labelGrow);

function labelShrink() {
    document.querySelector('.inputLabel').style.fontSize = ".75rem";
}

function labelGrow() {
    if (!document.querySelector('.inputField').value) {
        document.querySelector('.inputLabel').style.fontSize = "1.5rem";
    } 
}

.inputContainer {
    position: relative;
}

.inputLabel {
    position: absolute;
    z-index = -1; 
    padding: .25rem 0 0 .25rem;
    font-size: 1.5rem;
    user-select: none;
    transition: font-size .25s;
}

.inputField {
    padding: .75rem 0 0 0;
    font-size: 2rem;
    background-color: transparent;
}

<div class="inputContainer">
  <label class="inputLabel" for="userName">User Name</label>
  <input class="inputField" type="text" name="userName">
</div>

Answer 1

在标签上添加pointer-events: none;，以便单击它。

document.querySelector('input').addEventListener('focus', labelShrink);
document.querySelector('input').addEventListener('blur', labelGrow);

function labelShrink() {
    document.querySelector('.inputLabel').style.fontSize = ".75rem";
}

function labelGrow() {
    if (!document.querySelector('.inputField').value) {
        document.querySelector('.inputLabel').style.fontSize = "1.5rem";
    } 
}

.inputContainer {
    position: relative;
}

.inputLabel {
    position: absolute;
    z-index = -1; 
    padding: .25rem 0 0 .25rem;
    font-size: 1.5rem;
    user-select: none;
    transition: font-size .25s;
    pointer-events: none; // Add this line
}

.inputField {
    padding: .75rem 0 0 0;
    font-size: 2rem;
    background-color: transparent;
}

<div class="inputContainer">
  <label class="inputLabel" for="userName">User Name</label>
  <input class="inputField" type="text" name="userName">
</div>

如何阻止标签阻止输入元素内部的用户输入

1 个答案: