Solved

Force the cursor to remain in a textbox

Posted on 2013-01-10
6
284 Views
Last Modified: 2013-11-19
I have a page which has a textbox and button.  When the page is loaded the cursor is in the textbox.  This was done with this line of code
   txtTrackInfo.Focus();
placed inside the Page_Load event.  
This is the only textbox on the screen.  If the user clicks on the screen the cursor is no longer in the textbox.  What I am hoping to do is force the cursor to stay in the textbox even if the user clicks on the page.

Is there any way I can force the cursor to stay in the textbox?
0
Comment
Question by:tj_ntwnt
6 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38765300
No.
0
 
LVL 78

Expert Comment

by:David Johnson, CD, MVP
ID: 38765607
If there was some mystical way of forcing the cursor to remain in the text box then there would be absolutely no way of clicking the submit button. As DaveBaldwin stated the answer is :NO
0
 
LVL 8

Expert Comment

by:deepu chandran
ID: 38766100
HI,
It is Yes if you use JQuery

Use JQuery to handle the form Click event.

http://www.w3schools.com/jquery/default.asp 
http://api.jquery.com/click/

Deepu
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:tj_ntwnt
ID: 38767518
Thanks deepudeepam,
I have looked at those to links and cannot find a way to do it.  This is the page that I am working on:
<asp:Content ID="MainContent" ContentPlaceHolderID="Main" runat="server">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<asp:Panel ID="panMain" runat="server" DefaultButton="btnLogin" Width="100%" >
<table>
<tr>
<td colspan="100">
</td>
<td colspan="100">
        <asp:Label ID="lblLoginInstructions" runat="server" Text="Please swipe your card" ></asp:Label>
</td>
</tr>
<tr>
<td colspan="100" align="right">
    <asp:label ID="lblTrackInfo" runat="server" Text="" ></asp:label>
</td>
<td colspan="100">
        <asp:TextBox ID="txtTrackInfo" runat="server" Width="1px" BorderStyle="None"
            BorderWidth="0px" ></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="100">
</td>
<td colspan="100">
        <asp:button ID="btnLogin" runat="server" onclick="btnLogin_Click"
            Visible="true" BackColor="White" BorderStyle="None"></asp:button>
</td>
</tr>
</table>
</asp:Panel>
</asp:Content>

What I am trying to do is make txtTrackInfo be always selected.  I tried adding <div id="ClickRegion" >arround the panel and putting this script above it:
<script type="text/jscript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/jscript" >
    $("#ClickRegion").click(function () {
        $("txtTrackInfo").focus();
    });
</script>
It didn't work.  It seems that the problem that I am having is how to reference txtTrackInfo inside jscript.

Can you help me with that?

Thanks.
0
 
LVL 8

Accepted Solution

by:
johny_bravo1 earned 500 total points
ID: 39250431
Hi,

It sounds interesting. Tried a few things for you.

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            $("#<%= txtTrackInfo.ClientID %>").focus();

            $("#<%= txtTrackInfo.ClientID %>").blur(function () {
                $("#<%= txtTrackInfo.ClientID %>").focus();
            })

            $(".myDiv").click(function () {
                $(".myDiv").css("border", "3px solid red");
                $("#<%= txtTrackInfo.ClientID %>").focus();
            })
        })

   
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
   <div class="myDiv">
        <asp:Panel ID="panMain" runat="server" DefaultButton="btnLogin" Width="100%">
            <table>
                <tr>
                    <td colspan="100">
                    </td>
                    <td colspan="100">
                        <asp:Label ID="lblLoginInstructions" runat="server" Text="Please swipe your card"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td colspan="100" align="right">
                        <asp:Label ID="lblTrackInfo" runat="server" Text=""></asp:Label>
                    </td>
                    <td colspan="100">
                        <asp:TextBox ID="txtTrackInfo" runat="server" Width="100px" BorderStyle="Solid" BorderWidth="1px"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td colspan="100">
                    </td>
                    <td colspan="100">
                        <asp:Button ID="btnLogin" runat="server" Visible="true" Text="Login"></asp:Button>
                    </td>
                </tr>
            </table>
        </asp:Panel>
    </div>
</asp:Content>


Output :
Places cursor in textbox when page load
Click tab button from textbox will still keep the cursor in textbox
Clicking on the div, still curosr on same textbox
But multiple clicks take it away

Hope it might give you some direction.
0
 

Author Closing Comment

by:tj_ntwnt
ID: 39266876
Thanks very much johny_bravo1.  It works great!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now