使输入在段落之前

Question

我正在使用输入创建一个小效果，但我遇到了一个问题。

我有一个输入，作为占位符，我使用了一个段落，我使用translate 在输入中定位。

我正在做的是当输入聚焦时，段落向上移动，当它没有聚焦时，它被放回其原始位置，“内部”输入。

像这样：

问题是，为了使输入集中我必须点击它，但 p 在它前面，所以，当我点击文本时，我没有到达输入，因此它没有'不集中注意力，p 不动。

有没有办法在输入后面发送p？我试过z-index，但它似乎对输入不起作用。

有没有类似的东西可以用？

const placeholder = document.getElementsByClassName('frete-input-placeholder')[0].parentNode.children

const h2 = document.getElementById('h2')

window.addEventListener('click', () => {
    if (placeholder[1] === document.activeElement) {
        placeholder[0].style.transform = 'translate(0, 30px)'
      h2.innerHTML = 'FOCUSED'
    } else {
        placeholder[0].style.transform = 'translate(0, 55px)'
      h2.innerHTML = 'NOT FOCUSED'
    }
})

.frete-calculo-cep {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 65%;
}

.frete-calculo-cep div {
    width: 62%;
}

.frete-input-placeholder {
    background-color: tomato;
    width: 20%;
    margin-left: 10px;
  
    transform: translate(0, 55px);
    transition: 0.5s;
}

.frete-calculo-cep input {
    max-width: 93%;
    height: 42px;
    outline: none;
    border:1px solid #BEBEBE;
    padding-left: 10px;
    font-size: 18px;
    z-index: 9999;
    
    border-radius: 3px;
}

.frete-calculo-cep input:focus {
    outline: none;
    border:1px solid #5A98FF;
}

.frete-calculo-cep button {
    width: 35%;
    height: 45px;
    background-color: #5F22A8;
    color: white;
    font-weight: bold;
    font-size: 17px;
    border: 0;
    cursor: pointer;

    border-radius: 3px;
}

.frete-calculo-cep button:hover {
    background-color: #7032bb;
}

.frete-calculo-cep button:focus {
    outline: 0;
}

<div class="frete-calculo-cep">
      <div>
            <p class="frete-input-placeholder" >Digite seu CEP</p>
            <input type="text" />
      </div>
 </div>

<h2 id="h2">NOT FOCUSED</h2>

Answer 1

只需在 CSS 中的段落上设置pointer-events:none;。

而且，document.getElementsByClassName()[0] 是非常非常糟糕的代码。请改用document.querySelector，如下所示。

并且，不要使用内联样式，而是始终尝试使用 CSS 类，您可以使用 element.classList 轻松添加、删除或切换。

最后，当您正在使用的字符串中没有 HTML 时，不要使用 .innerHTML，因为 .innerHTML 具有安全性和性能影响。请改用textContent。

const placeholder = document.querySelector('.frete-input-placeholder');
const input = document.querySelector("input");

const h2 = document.getElementById('h2')

window.addEventListener('click', () => {
    if (input === document.activeElement) {
      placeholder.classList.add("focused");
      h2.textContent = 'FOCUSED'
    } else {
      placeholder.classList.remove("focused");
      h2.textContent = 'NOT FOCUSED'
    }
})

.frete-calculo-cep {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 65%;
}

.frete-calculo-cep div {
    width: 62%;
}

.frete-input-placeholder {
    background-color: tomato;
    width: 20%;
    margin-left: 10px;
  
    transform: translate(0, 55px);
    transition: 0.5s;
    
    pointer-events:none;  /* <---- This is all you need  */
}

/* Use CSS Classes instead of inline CSS */
.focused { transform:translate(0, 30px); }

.frete-calculo-cep input {
    max-width: 93%;
    height: 42px;
    outline: none;
    border:1px solid #BEBEBE;
    padding-left: 10px;
    font-size: 18px;
    z-index: 9999;
    
    border-radius: 3px;
}

.frete-calculo-cep input:focus {
    outline: none;
    border:1px solid #5A98FF;
}

.frete-calculo-cep button {
    width: 35%;
    height: 45px;
    background-color: #5F22A8;
    color: white;
    font-weight: bold;
    font-size: 17px;
    border: 0;
    cursor: pointer;

    border-radius: 3px;
}

.frete-calculo-cep button:hover {
    background-color: #7032bb;
}

.frete-calculo-cep button:focus {
    outline: 0;
}

<div class="frete-calculo-cep">
      <div>
            <p class="frete-input-placeholder" >Digite seu CEP</p>
            <input type="text" />
      </div>
 </div>

<h2 id="h2">NOT FOCUSED</h2>

Answer 2

我刚刚将p 与position absolute 移到后面

const placeholder = document.getElementsByClassName('frete-input-placeholder')[0].parentNode.children

const h2 = document.getElementById('h2')

window.addEventListener('click', () => {
    if (placeholder[1] === document.activeElement) {
        placeholder[0].style.transform = 'translate(0, 30px)'
      h2.innerHTML = 'FOCUSED'
    } else {
        placeholder[0].style.transform = 'translate(0, 55px)'
      h2.innerHTML = 'NOT FOCUSED'
    }
})

.frete-calculo-cep {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 65%;
    margin-top: 50px;
}

.frete-calculo-cep div {
    width: 62%;
}

.frete-input-placeholder {
    background-color: tomato;
    width: 20%;
    margin-left: 10px;
    position: absolute;
    top: -20px;
    transform: translate(0, 55px);
    transition: 0.5s;
}

.frete-calculo-cep input {
    max-width: 93%;
    height: 42px;
    outline: none;
    border:1px solid #BEBEBE;
    padding-left: 10px;
    font-size: 18px;
    z-index: 9999;
    
    border-radius: 3px;
}

.frete-calculo-cep input:focus {
    outline: none;
    border:1px solid #5A98FF;
}

.frete-calculo-cep button {
    width: 35%;
    height: 45px;
    background-color: #5F22A8;
    color: white;
    font-weight: bold;
    font-size: 17px;
    border: 0;
    cursor: pointer;

    border-radius: 3px;
}

.frete-calculo-cep button:hover {
    background-color: #7032bb;
}

.frete-calculo-cep button:focus {
    outline: 0;
}

#input1 {
  position: relative;
}

<div class="frete-calculo-cep">
      <div>
            <p class="frete-input-placeholder" >Digite seu CEP</p>
            <input type="text" id="input1" />
      </div>
 </div>

<h2 id="h2">NOT FOCUSED</h2>