Remove "disabled" with Javascript

Asked

Viewed 993 times

3

Good evening. I wanted to remove the disabled attribute from a tag when a certain condition is met, but I couldn’t find any idea how to do that. Below the HTML:

Escreva aqui: <input type="text" id="text1" autofocus><br> <!--input livre-->
Depois aqui: <input type="text" id="text2" disabled> <!--deveria ficar livre depois que enviar o valor do input#text1-->

Now the Javascript:

const t = document.querySelector("#text1")
t.addEventListener('keyup', function(e){
  var key = e.which || e.keyCode;
  if (key == 13) {     //quando a tecla enter é apertada a função abaixo acontece
    //aqui deveria entrar a função de tirar o disabled do input#text2 
}});

If anyone can please help me.

javascript html function javascript-events

3 answers

3

Just set the attribute disabled for false.

const t = document.querySelector("#text1")
t.addEventListener('keyup', function(e){
var key = e.which || e.keyCode;
if (key == 13) {     //quando a tecla enter é apertada a função abaixo acontece
    document.getElementById("text2").disabled = false; 
}});

  • I’ve tried it and it hasn’t worked yet.

  • He’s going into the if(key == 13) ? If there’s a way you can test and tell us.

  • Yes, you are, just like you said.

  • Try to give a console.log(document.getElementById("text2")) to see if he’s getting the element.

3


To remove the attribute disabled just use the method removeAttribute of Element. This one gets a string indicating the name of the attribute to be removed, and does not generate an error even if the attribute does not exist.

The use in your example would be:

document.querySelector("#text2").removeAttribute("disabled");

See working:

const t = document.querySelector("#text1")
t.addEventListener('keyup', function(e){
  var key = e.which || e.keyCode;
  if (key == 13) {
      document.querySelector("#text2").removeAttribute("disabled");
  }
});
Escreva aqui: <input type="text" id="text1" autofocus><br> <!--input livre-->
Depois aqui: <input type="text" id="text2" disabled> <!--deveria ficar livre depois que enviar o valor do input#text1-->

1

And if we go beyond simple necessity?

A (several) suggestion would be:

  • When the Enter in the current <input> we move to the next one and "disable" the disabled, if you have;
  • When there is no next, return to the first;
  • No need to add an identifier to each <input>.

//usando es6
    const inputs = document.querySelectorAll('div input') //pega todos os 'inputs' dentro de 'div'

    inputs.forEach((input, index) => {

        input.dataset.index = index // attr 'data-index'
        input.addEventListener('keyup', (e)=>{
            let _this = e.target
            let _index = parseInt(_this.dataset.index, 10) //converte string em numero
            let keycode = e.keyCode || e.which
            if(keycode === 13) { //is Enter
                let nextSibling = inputs[_index+1]
                if(nextSibling !== undefined) {
                    nextSibling.disabled = false //remove o disabled
                } else nextSibling = inputs[0] // volta para o primeiro input

                nextSibling.focus() // autofoco
                // nextSibling.select() // caso precise fazer selecionar todo o valor
            }

        })

    })
input{margin-bottom:5px}
    <div>
        a: <input type="text" autofocus><br>
        b: <input type="text" disabled><br>
        c: <input type="text" disabled><br>
        d: <input type="text" disabled><br>
        e: <input type="text" disabled><br>
        [...]
    </div>

Obs: js have to be at the end of any code. -before closing </body> -

Browser other questions tagged javascript html function javascript-events

You are not signed in. Login or sign up in order to post.