locked
cursor not blinking in textbox after getting focus RRS feed

  • Question

  • User1052662409 posted

    Hi All,

    I am trying to focus on a textbox on some events. When I press tab (to go from ddlExeCountry to txtpurpose_of_request) the textbox is getting focus, but the cursor not coming and blinking in the text box for typing. You have to click in the textbox for typing.

    The code is as below

     $('body').on('blur', '#ddlExeCountry', function () {
                $('#divPurposeOfRequest').show();
                $('#pnlMsg').text("Kindly provide the Purpose of your request.");
                $("#txtpurpose_of_request").focus();
            });

    Please suggest.

    Tuesday, May 12, 2020 7:59 AM

Answers

  • User475983607 posted

    I built a test using your code and the code functions as expected.

    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    @Html.ActionLink("test", "Test")
    
    <div>
        <select id="ddlExeCountry">
            <option>1</option>
            <option>2</option>
            <option>3</option>
    
        </select>
    </div>
    <div id="divPurposeOfRequest" style="display:none;">
        <div id="pnlMsg"></div>
        <input id="txtpurpose_of_request" type="text" name="txtpurpose_of_request" />
    </div>
    
    
    @section scripts {
    <script>
        $('body').on('blur', '#ddlExeCountry', function () {
            $('#divPurposeOfRequest').show();
            $('#pnlMsg').text("Kindly provide the Purpose of your request.");
            $("#txtpurpose_of_request").focus();
        });
    </script>
    } 

    There must be other issues with your code.  Please take a few moments to do a little basic troubleshooting.  Otherwise, provide enough code that illustrates this issue.  

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 12, 2020 12:07 PM
  • User1535942433 posted

    Hi demoninside9,

    Accroding to your description and codes,as far as I think,you could use keyup event.

    Since you don't post your front page design,I create a demo.

    More details,you could refer to below codes:

    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-2.1.0.min.js"></script>
        <script>
            $(function () {
                $("#ddlExeCountry").keyup(function () {
                    $('#divPurposeOfRequest').show();
                    $('#pnlMsg').text("Kindly provide the Purpose of your request.");
                    $("#txtpurpose_of_request").focus();
                })
            })
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:DropDownList ID="ddlExeCountry" runat="server">
                    <asp:ListItem Value="1" Text="1"></asp:ListItem>
                    <asp:ListItem Value="2" Text="2"></asp:ListItem>
                </asp:DropDownList>
                <div id="divPurposeOfRequest" style="display: none">
                    <div id="pnlMsg"></div>
                    <asp:TextBox ID="txtpurpose_of_request" runat="server"></asp:TextBox>
                </div>
    
            </div>
        </form>
    </body>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 13, 2020 3:04 AM

All replies

  • User475983607 posted

    I built a test using your code and the code functions as expected.

    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    @Html.ActionLink("test", "Test")
    
    <div>
        <select id="ddlExeCountry">
            <option>1</option>
            <option>2</option>
            <option>3</option>
    
        </select>
    </div>
    <div id="divPurposeOfRequest" style="display:none;">
        <div id="pnlMsg"></div>
        <input id="txtpurpose_of_request" type="text" name="txtpurpose_of_request" />
    </div>
    
    
    @section scripts {
    <script>
        $('body').on('blur', '#ddlExeCountry', function () {
            $('#divPurposeOfRequest').show();
            $('#pnlMsg').text("Kindly provide the Purpose of your request.");
            $("#txtpurpose_of_request").focus();
        });
    </script>
    } 

    There must be other issues with your code.  Please take a few moments to do a little basic troubleshooting.  Otherwise, provide enough code that illustrates this issue.  

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 12, 2020 12:07 PM
  • User-474980206 posted

    I assume the input is in the hidden div and you are trying to set the focus before its displayed. the most common solution is use a timer:

            $('body').on('blur', '#ddlExeCountry', function () {
                $('#divPurposeOfRequest').show();
                $('#pnlMsg').text("Kindly provide the Purpose of your request.");
                setTimout(function(){
                    $("#txtpurpose_of_request").focus();
                });
            });

    note: if you are using effects (fade in), use the completion routine to set focus.

    Tuesday, May 12, 2020 3:09 PM
  • User1535942433 posted

    Hi demoninside9,

    Accroding to your description and codes,as far as I think,you could use keyup event.

    Since you don't post your front page design,I create a demo.

    More details,you could refer to below codes:

    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-2.1.0.min.js"></script>
        <script>
            $(function () {
                $("#ddlExeCountry").keyup(function () {
                    $('#divPurposeOfRequest').show();
                    $('#pnlMsg').text("Kindly provide the Purpose of your request.");
                    $("#txtpurpose_of_request").focus();
                })
            })
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:DropDownList ID="ddlExeCountry" runat="server">
                    <asp:ListItem Value="1" Text="1"></asp:ListItem>
                    <asp:ListItem Value="2" Text="2"></asp:ListItem>
                </asp:DropDownList>
                <div id="divPurposeOfRequest" style="display: none">
                    <div id="pnlMsg"></div>
                    <asp:TextBox ID="txtpurpose_of_request" runat="server"></asp:TextBox>
                </div>
    
            </div>
        </form>
    </body>

    Result:

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 13, 2020 3:04 AM