Muneeb Ur Rehman free asked 5 years ago


I Cant Focus Input Field In MDB. Before using MDB i am using Bootstrap. In Bootstrap i am using this line to focus an element $('element-id').focus(); . But MDB i cant able for focus an input field.

mbanolas pro answered 3 years ago


Did you solve the problem? I have the same problem when I form is loaded I want to focus in an input field but the jQuery focus function does not work properly: it focus the input but the label does not go up.

I tried to add the class active but it is not added.

How can I solve it?


Bartłomiej Malanowski staff commented 3 years ago

How can we reproduce your issue?


Muneeb Ur Rehman free commented 3 years ago

add "active" class to label


Krzysztof Wilk staff answered 2 years ago


I think $('#form1').on('focus', function() { $('#basicExampleModal').modal('show'); }) should work. I made a snippet for you, you can check it here: https://mdbootstrap.com/snippets/jquery/krzysztof-wilk/2341059#js-tab-view

Best regards


itsued priority answered 2 years ago


You can try this.

Set focus() after shown-event

<script>
    $("#modal_window").on('shown.bs.modal', function(){
        $('#input_field_id').focus();
    });
    $('#modal_window').modal('show');
</script>

soiware priority commented 1 year ago

Thank you, it works fine.


Seesicht-IT free answered 2 years ago


Hi, I have the same problem. I cannot set the focus on the input field. Neither with "autofocus" nor with Javascript ".focus()".

I am trying it with this page "login-page.html" from the templates folder of the mdbootstrap-pro folder. (I am using NPM via git to download the entire library).

I also tried this:

setTimeout(function() { $("#orangeForm-name").focus(); console.log("Focus set"); }, 500);

But this does not help either. Any ideas? I am using version MDB Pro 4.8.11


Magdalena Dembna staff commented 2 years ago

I have created a code snippet which focuses an input after 2s: https://mdbootstrap.com/snippets/jquery/m-dembna/1398056#js-tab-view Take a look if this code solves your problem, if not, create a similar code snippet with your case.


jay2jam pro answered 3 years ago


We have the same problem in Vue. We can focus and type only 1 character, after that, focus is losing, there is no error in console. It happens after we are updated to mdb version 5.8.2, with 5.6 we had no problems.


Magdalena Dembna staff commented 3 years ago

Hi, this bug is already fixed on dev branch on gitlab, so you can temporarily install dependencies from this branch, or wait until Monday - we will release bug fixes then. I apologize for the inconvenience. Kind regards, Magdalena


Muneeb Ur Rehman free answered 5 years ago


OK. Now i know what problem i am facing. When page loads at this time i am able to focus input field but when i drop input element through javascript or jquery $.post(); on body or any div element. i cannot focus this element.

Try the following code: HTML:
<div class="md-form">
    <input type="text" id="form1" class="form-control">
    <label for="form1" class="">Example label</label>
</div>
JS:
$(function() {
    $('#form1').focus();
});

Muneeb Ur Rehman free answered 5 years ago


No Console log. There is not a single Error or warning on console. All the script are properly loaded but i cannot focus input field or textarea.

Any console logs?

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags