Can someone help me, I’m not able to type in input

Question

So I have these codes here, my div is draggable/Moveable, but for some reason I can’t type in this input, can anyone find me? Thank you in advance :)

//Make the DIV element draggagle:
dragElement(document.getElementById("ajuda"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
    
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
    
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
    
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";


    // CÓDIGO (início)
    var ww = window.innerWidth; // largura da janela
    var wh = window.innerHeight; // altura da janela
    var ew = elmnt.offsetWidth; // largura do elemento
    var eh = elmnt.offsetHeight; // altura do elemento

     // se a posição for maior ou igual do que a largura da tela menos a largura do elemento
    if(elmnt.offsetLeft - pos1 >= ww-ew){
        elmnt.style.left = ww-ew +"px";
    }

     // se a posição for maior ou igual do que a altura da tela menos a altura do elemento
    if(elmnt.offsetTop - pos2 >= wh-eh){
        elmnt.style.top = wh-eh +"px";
    }

    // se a posição for menor ou igual que zero ao topo
    // ou a altura do elemento for maior que a altura da janela
    if(elmnt.offsetTop - pos2 <= 0 || eh >= wh){
        elmnt.style.top = "0";
    }

    // se a posição for menor ou igual que zero para a esquerda
    // ou a largura do elemento for maior que a largura da janela
    if(elmnt.offsetLeft - pos1 <= 0 || ew >= ww){
        elmnt.style.left = "0";
    }
    // CÓDIGO (fim)
     
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
      
  }
}

.ajudaConteudo {
    background-color: white;
    height: 400px;
    position: absolute;
    margin-top: 100px;
    width: 350px;
    overflow-y: scroll;
    cursor: auto;
    overflow-x: hidden;
}

.ajudaTitulo {
    background-color: #1ab3ff;
    height: 90px;
    width: 335px;
    font-family: Arial;
    font-size: 30px;
    color: white;
    position: absolute;
    padding-top: 10px;
    padding-left: 15px;
}

.pesquisaAjuda {
    position: absolute;
    top: 60px;
    padding: 6px;
    width: 280px;
    left: 50%;
    transform: translate(-50%);
    z-index: 9999;
    border-radius: 5px;
    border: 1px solid transparent;
}

.ajudinha {
    background-color: white;
    margin-left: 8px;
    margin-right: 8px;
    box-shadow: 1px 1px 7px grey;
    margin-top: 10px;
    height: 80px;
}

.ajudinha h1 {
    color: gray;
    font-weight: 600;
    word-break: break-all;
    font-size: 16px;
    text-align: center;
}

.ajudinha p {
    padding-top: 5px;
    color: gray;
    padding-left: 10px;
    padding-right: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#ajuda {
    width: 350px;
    height: 500px;
    background-color: red;
    position: absolute;
    z-index: 99999;
    right: 20px;
    top: 10%;
    cursor: all-scroll;
    box-shadow: 2px 2px 10px gray;
 
    
}


.fecharAjuda {
    position: absolute;
    top: 0px;
    transition: all .4s;
    left: 92%;
    font-size: 35px;
    cursor: pointer;
}

.fecharAjuda:hover {
    color: #777;
}

<div id="ajuda">
    <input type="text" id="pesquisaAjuda" class="pesquisaAjuda" placeholder="Pesquisa aqui">
    <div class="ajudaTitulo">
        Ajuda
        <div class="fecharAjuda">x</div>
       
    </div>
    <div class="ajudaConteudo">
        <div class="ajudinha">
           <a href="">ss</a>
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>

    </div>
</div>

Answer 1

The function dragElement is preventing the field from being focussable because of the event onmousedown in div father. You must cancel the event temporarily by clicking on the field, and when leaving it, enable again. I added the events at the beginning of the function to do this (see explanations in the code):

//Make the DIV element draggagle:
dragElement(document.getElementById("ajuda"));

function dragElement(elmnt) {

   // habilitar a pesquisa (início)
   var pesquisa = document.getElementById("pesquisaAjuda"); // seleciona o campo de pesquisa

   pesquisa.onclick = function(e){
      e.stopPropagation(); // evita o evento click na div
      elmnt.onmousedown = null; // remove o evento onmousedown
      this.focus(); // foca o campo
   }
   pesquisa.onmouseout = function(){
      dragElement(document.getElementById("ajuda")); // reabilita o drag
   }
   elmnt.onclick = function(){
      pesquisa.blur(); // força o blur ao clicar na div pai
   }
   // habilitar a pesquisa (fim)


  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
    
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
    
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
    
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";


    // CÓDIGO (início)
    var ww = window.innerWidth; // largura da janela
    var wh = window.innerHeight; // altura da janela
    var ew = elmnt.offsetWidth; // largura do elemento
    var eh = elmnt.offsetHeight; // altura do elemento

     // se a posição for maior ou igual do que a largura da tela menos a largura do elemento
    if(elmnt.offsetLeft - pos1 >= ww-ew){
        elmnt.style.left = ww-ew +"px";
    }

     // se a posição for maior ou igual do que a altura da tela menos a altura do elemento
    if(elmnt.offsetTop - pos2 >= wh-eh){
        elmnt.style.top = wh-eh +"px";
    }

    // se a posição for menor ou igual que zero ao topo
    // ou a altura do elemento for maior que a altura da janela
    if(elmnt.offsetTop - pos2 <= 0 || eh >= wh){
        elmnt.style.top = "0";
    }

    // se a posição for menor ou igual que zero para a esquerda
    // ou a largura do elemento for maior que a largura da janela
    if(elmnt.offsetLeft - pos1 <= 0 || ew >= ww){
        elmnt.style.left = "0";
    }
    // CÓDIGO (fim)
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
      
  }
}

.ajudaConteudo {
    background-color: white;
    height: 400px;
    position: absolute;
    margin-top: 100px;
    width: 350px;
    overflow-y: scroll;
    cursor: auto;
    overflow-x: hidden;
}

.ajudaTitulo {
    background-color: #1ab3ff;
    height: 90px;
    width: 335px;
    font-family: Arial;
    font-size: 30px;
    color: white;
    position: absolute;
    padding-top: 10px;
    padding-left: 15px;
}

.pesquisaAjuda {
    position: absolute;
    top: 60px;
    padding: 6px;
    width: 280px;
    left: 50%;
    transform: translate(-50%);
    z-index: 9999;
    border-radius: 5px;
    border: 1px solid transparent;
}

.ajudinha {
    background-color: white;
    margin-left: 8px;
    margin-right: 8px;
    box-shadow: 1px 1px 7px grey;
    margin-top: 10px;
    height: 80px;
}

.ajudinha h1 {
    color: gray;
    font-weight: 600;
    word-break: break-all;
    font-size: 16px;
    text-align: center;
}

.ajudinha p {
    padding-top: 5px;
    color: gray;
    padding-left: 10px;
    padding-right: 7px;
    overflow: hidden;
    text-overflow: ellipsis;
}

#ajuda {
    width: 350px;
    height: 500px;
    background-color: red;
    position: absolute;
    z-index: 99999;
    right: 20px;
    top: 10%;
    cursor: all-scroll;
    box-shadow: 2px 2px 10px gray;
 
    
}


.fecharAjuda {
    position: absolute;
    top: 0px;
    transition: all .4s;
    left: 92%;
    font-size: 35px;
    cursor: pointer;
}

.fecharAjuda:hover {
    color: #777;
}

<div id="ajuda">
    <input type="text" id="pesquisaAjuda" class="pesquisaAjuda" placeholder="Pesquisa aqui">
    <div class="ajudaTitulo">
        Ajuda
        <div class="fecharAjuda">x</div>
       
    </div>
    <div class="ajudaConteudo">
        <div class="ajudinha">
           <a href="">ss</a>
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>
        <div class="ajudinha">
            <h1>Como eu faço para cadastrar um aluno?</h1>
            <p>Para cadastrar um aluno vc precisa ir no botão alunos localizado no menu lateral e preencher o formulário que aparecerá.</p>
        </div>

    </div>
</div>