Make a input be ahead of a paragraph

Question

I am creating a little effect with an input, but I am facing a problem.

I have an input and as a placeholder I am using a paragraph which I used translate to position inside the input.

What I am doing is when the input is focused the paragraph is moved up and when it is not focused it is put back in its original position, 'inside' the input.

Like this:

The problem is that in order to make the input focused I have to click on it, but the p is ahead of it, so, when I click on the text I don't reach the input, consequently it doesn't get focused and the p doesn't move.

Is there a way to send the p behind the input? I tried with z-index, but it seems that it doesn't work to inputs.

Is there anything similar that would work?

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>

Scott Marcus · Accepted Answer · 2020-11-14T22:23:31.190

Just set pointer-events:none; on the paragraph in CSS.

But also, document.getElementsByClassName()[0] is really, really not good code. Instead use document.querySelector as I've shown below.

And, instead of inline styles, always try to use CSS classes, which you can easily add, remove or toggle with element.classList.

Finally, don't use .innerHTML when there is no HTML in the string you are working with as .innerHTML has security and performance implications. Use textContent instead.

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>

score 1 · Answer 2 · answered Nov 14 '20 at 22:12

I just moved the p behind with 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>

Make a input be ahead of a paragraph

2 Answers2