-2

preciso de uma ajuda, eu montei uma função para bloquear o espaço seja teclado no primeiro elemento do input

gostaria de fazer com que a função rodasse em todos os campos, porem ele só bloqueia no primeiro campo os demais campos a função não funciona.

var input = document.querySelector('input');
    
  input.addEventListener("keypress", function(e) {
    if (this.selectionStart === 0) {
        if (e.which === 32 ) {
            e.preventDefault();
        }
    }
});
<input type="text" id="campo1">
  <input type="text" id="campo2">
  <input type="text" id="campo3">

3
  • 1
    querySelector só retorna um elemento; se precisa todos use querySelectorAll.
    – Woss
    16/01/2020 às 11:23
  • quando uso o querySelectorAll a função nao funciona em nenhum campo
    – Fragosojp
    16/01/2020 às 11:23
  • 1
    Sim, leia a documentação dessa função para entender como ela funciona: developer.mozilla.org/pt-BR/docs/Web/API/Document/…
    – Woss
    16/01/2020 às 11:26

1 Resposta 1

2

Usando o querySelector, você estará aplicando a regra apenas ao primeiro elemento encontrado no DOM.

Pegue todos os elementos utilizando a função querySelectorAll que retornará um array com todos os elementos selecionados, depois basta apenas percorrer esses elementos e aplicar a regra para o bloqueio do caracter.

let input = document.querySelectorAll('input');

//console.log(input)

    input.forEach(el => {
      el.addEventListener("keypress", function(e) {
          if (this.selectionStart === 0) {
              if (e.which === 32 ) {
                  e.preventDefault();
              }
          }
      });
    })
<input type="text" id="campo1">
  <input type="text" id="campo2">
  <input type="text" id="campo3">

1
  • muito obrigado , pela ajuda...
    – Fragosojp
    17/01/2020 às 19:53

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .