Cant Focus Input Field

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Cant Focus Input Field

Muneeb Ur Rehman asked 8 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 5 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 pro premium commented 5 years ago

How can we reproduce your issue?

Muneeb Ur Rehman commented 5 years ago

add "active" class to label

Bartłomiej Malanowski staff pro premium answered 8 years ago

Any console logs?

Muneeb Ur Rehman answered 8 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.

Bartłomiej Malanowski staff pro premium answered 8 years ago

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 answered 8 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.

jay2jam pro answered 5 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 premium commented 5 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

Seesicht-IT answered 5 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 premium commented 5 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.

itsued pro premium priority answered 4 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 pro premium priority commented 4 years ago

Thank you, it works fine.

Krzysztof Wilk staff answered 4 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

Write
Create snippet
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
About author
Muneeb Ur Rehman
10Support score
1Questions 2Answers
0Snippets likes 0Snippets