CODEWITHSUNDEEP
javascriptjqueryhtml
홍의숙
홍의숙

Reputation: 317

jQuery | Set focus to input (fixed focus)

I want my input always has value so that focus is fixed to it until the values are typed and the cursor also can't escape the input. I know the focus() function is existed but how can i deal with it? It is just an event isn't it? Is there any solution?

This is the html code which include the input.

<div class="col-xs-3 vcenter from-group" id="info">
<div class="form-group">
    <label class="control-label" for="inputID">아이디</label><p style="display:inline; padding-left:60px; color:red; font-size: 12px">* 적어도 하나의 대문자, 소문자, 숫자를 포함한 6자~16자</p>
    <div class="controls">
        <input type="text" class="form-control"  name="inputID" id="inputID" placeholder="내용을 입력해 주세요" required autofocus>
    </div>
</div>

This is the script where the input is bound the events.

<script>
jQuery('#inputID').keyup(blank_special_char_validation);
jQuery('#inputID').focusout(function(){
    if (!$(this).val()) {
        var message = "no id";
        error(this.id, message); // ** TODO : SET FOCUS HERE !!
    } else {
        id_form_validation(this.id);
    }
});

Could you guys see the **TODO in code above? I want to add function that the focus is fixed until the value is written.

Please could guys give me some idea. Thank you.

=========================================================================
I want to focus my input depends on situation. For example, I want to focus it when the value isn't existed or the validation doesn't correct. However it has to focus out when the value is existed or the validation is true. I can set focus it finally but how can i unfocus it? I mean i want to untrigger the focus event. 

jQuery('#inputID').on('blur',function(){
if (!$(this).val()) {
    var message = "아이디를 입력해 주세요";
    error(this.id, message);
    $(this).focus();
} else {
    //$(this).focus();
    if (!id_form_validation(this.id)) {
        $(this).focus();       // TODO : FOCUS
    }else {
        $(this).off('focus');   // TODO : FOCUS OUT
        $(this).off('blur');
    }
}
});

Upvotes: 2

Views: 3824

Answers (2)

Bhavin Solanki
Bhavin Solanki

Reputation: 4818

You can use this code to do the same... I have used blur 

//jQuery('#inputID').keyup(blank_special_char_validation);

jQuery('#inputID').focusout(function() {
  if (!$(this).val()) {
    $(this).focus();
    var message = "no id";
        error(this.id, message); 
  }else {
        id_form_validation(this.id);
    }
   
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-3 vcenter from-group" id="info">
<div class="form-group">
    <label class="control-label" for="inputID">아이디</label><p style="display:inline; padding-left:60px; color:red; font-size: 12px">* 적어도 하나의 대문자, 소문자, 숫자를 포함한 6자~16자</p>
    <div class="controls">
        <input type="text" class="form-control"  name="inputID" id="inputID" placeholder="내용을 입력해 주세요" required autofocus>
    </div>
</div>

Upvotes: 3

Liem Do
Liem Do

Reputation: 943

Use $(this).focus() to focus your input. focus() with no arguments will trigger that event on an element.

Upvotes: 2

Related Questions