Home / Questions / 339284
Accepted
jmrufo
Asked: 2020-03-25 08:27:02 +0800 CST 2020-03-25 08:27:02 +0800 CST

Make FOCUS to div using JQuery

  • 772

After performing validation on a radiobutton set I need the form focus to move to a form element.

I have created a function that works perfectly (validates the fields and activates div with an error message) but it does not move the focus to the indicated element.

Can someone point me to what I'm doing wrong?

Html code:

<div id="txtotronodo" style="display: none;">
<input type="text" id="reply6" name="txtotronodo" class="form-control col-sm-12" placeholder="Indique el nodo">
</div>

JQuery code:

$(document).ready(function() {
    function validaNodo() {
        var nodo = $("input[name=nodo]:radio:checked").length;
        if (nodo !== 1) {
            $("#nodo").css("display", "block");
            $(document).on('focus', 'reply6');
            $('reply6').focus();
            event.preventDefault();
        }
        else {
            $("#nodo").css("display", "none");
        }
    }
});

A greeting and thanks in advance.

jquery

1 Answers

  1. Best Answer

    The focus can only be given to elements that can have it. A <div>is not one of them, <input>, <select>, <a>... yes they are.

    Example:

    $(function () {
  $(document).on('focus', 'div', foco_div);
  $(document).on('focus', 'input', foco_input);
  
  $('div').focus();
  $('input').focus();
});

function foco_input () {
  console.log('Input: ¡Me focuseaste, maldito seas!');
}

function foco_div () {
  console.log('Div: ¡No me puedes tocar, MUAHAHAHA!');
}
    input {
  width: 200px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <p>No me puedes hacer foco, que le vamos a hacer.</p>
</div>

<input type="text" value="Hazme todo el foco que quieras">

    Reference: focus()

    • 0