CODEWITHSUNDEEP
htmljqueryasp.net-mvc-4textfield
mdc
mdc

Reputation: 1201

How to keep focus on text field at all times (MVC 4 c#)

I have a text field that always needs to be focused no matter what the user does.

I have activated the text field on load by doing this:

<html>
<head>
    < script type ="text/javascript" src ="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></ script>
    < script type ="text/javascript">
    $( function () {
        $( "#myTextBox2" ).focus();
    });
    </ script>
</head>
< body>
    < div>
        < input type ="text" id ="myTextBox">
        < input type ="text" id ="myTextBox2"onblur="var that= this; setTimeout(function() { that.focus(); }, 0);">
    </ div>
</ body>
</html>

If I press the tab button when trying the code above I can still tab away from myTextBox2, but I cant click on myTextBox with my mouse (which is right).

If the user presses any button or clicks anywhere on the site the text field should still be selected and focused. How do I enforce this completely?

Edit: Adding this to the header in my code and to the answer by Sven seems to do the trick:

    $(document).keydown(function(objEvent) {
        if (objEvent.keyCode == 9) {  //tab pressed
            objEvent.preventDefault(); // stops its action
       }
    })

Credit: Lock tab key with javascript?

Upvotes: 0

Views: 7033

Answers (2)

Sven van Zoelen
Sven van Zoelen

Reputation: 7229

You can keep the focus on the text field at all time with the following code:

HTML:

<form>
    <input type="text" name="name" id="focus" />
    <input type="text" name="name2" />
    <input type="text" name="name3" />
    <input type="text" name="name4" />
</form>

JS:

$(document).ready(function() {
    $("#focus").focus().bind('blur', function() {
        $(this).focus();            
    }); 

    $("html").click(function() {
        $("#focus").val($("#focus").val()).focus();
    });  

    //disable the tab key
    $(document).keydown(function(objEvent) {
        if (objEvent.keyCode == 9) {  //tab pressed
            objEvent.preventDefault(); // stops its action
       }
    })      
});​

Example on JsFiddle: Click!

I had to replace the value of the textfield to force/trigger the placement of the cursor in the focused field.

Hope this helps.

Upvotes: 4

Maurizio
Maurizio

Reputation: 725

I would to the following:

1) On page load, make the element focused automatically ( already done by you )

2) On #myTextBox2 create a key press event handler and discard every char except of the "real" input ones e.g. alfanumeric, dots, carets, and everything the user can actually input on that field

3) Create an onblur event handler on #myTextBox2 that actually focuses on the same input ( already done by you, I would suggest to put it on a script in the )

4) For completeness, put an Interval on your page that checks every X microseconds that the input is focused. If not, make the input focused. This is optional.

Be aware that, in any case, if a function call actually detects that the input is not focused, and has to focus it, the focus will be pointed at the beginning of the input, so the user input will re-begin from the beginning of the input field. The input contents will not be destroyed, however the user will have to jump to the end of the input after the re-focus.

If you need any help in creating the event handlers, just ask.

Upvotes: 0

Related Questions