How to set focus at the end of textbox while typing?

Question

I have a textbox with a live search function. It is working all good except one problem. If I type any characters on it, it just loses its focus. If I set textbox.Focus(), the cursor goes at the beginning of the textbox.

I have tried most of solutions on the internet. Please check my codes below.

asp:TextBox ID="searchCompany" runat="server" Text="" CssClass="searchCompany" AutoPostBack="true" Width="190px" OnTextChanged="searchCompany_TextChanged"></asp:TextBox>

In page_Load

protected void Page_Load(object sender, EventArgs e)
        {

            //ScriptManager1.RegisterAsyncPostBackControl(Menu1);
            menuDisplay();
            searchCompany.Attributes.Add("onkeyup", "setTimeout('__doPostBack(\\'" + searchCompany.UniqueID + "\\',\\'\\')', 0);");

            //searchCompany.Attributes.Add("onfocus", "javascript:setSelectionRange('" + "','')");
            //searchCompany.Focus();


        }

and I have tried javascript as below

<script type="text/javascript">

    function setSelectionRange() {
        var inputField = document.getElementById('searchCompany');
        if (inputField != null && inputField.value.length > 0) {
            if (inputField.createTextRange) {
                var FieldRange = inputField.createTextRange();
                FieldRange.moveStart('character',inputField.value.length);
                FieldRange.collapse();
                FieldRange.select();
            }
        }
    }

</script>

I have tried to put codes on a method "searchCompany_TextChanged" which is calling if user type any characters on a textbox everytime however it is not working as well.

I saw other solutions with using Textbox.Select() but System.Windows.Control is not working in asp.net i guess.

Any idea??

Hi SLaks keyup is the one that update my search field everytime when user type something on textbox. Is it not a good way to do it? — warang, Feb 18 '13 at 22:32
Read this [jQuery Set Cursor Position in Text Area](http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area). There are some good examples :-) — jwillmer, Feb 18 '13 at 22:49

lmortenson · Accepted Answer · 2013-02-18T21:58:57.050

2

There's a very simple trick that's worked for me. Basically, set the text value of the of input to itself to its own text value, and that will move the cursor to the end of the text. Then just focus it. This code uses jQuery to demonstrate that, but you should be able to do that in straight JS as well.

HTML

<input type="text" id="focusText"></input>
<button id="focusButton">Set Focus</button>

JavaScript

$("#focusButton").click(function()  {
    var text = $("#focusText").val();
    $("#focusText").val(text).focus();
})

Here's a non jQuery example of the JavaScript, HTML should be the same:

document.getElementById("focusButton").onclick = function()  {
    var inputElement = document.getElementById("focusText");
    var text = inputElement.value;
    inputElement.value = text;
    inputElement.focus();
}

Here's a fiddle demonstrating the non-jQuery version of the code: http://jsfiddle.net/C3gCa/

edited Feb 18 '13 at 21:58

answered Feb 18 '13 at 21:47

lmortenson

1,610
11
11

Hi Imortenson Thanks for your quick comment. I have tried to change my textbox to input type but I am not sure if its all working excatly same as my textbox. If I change it to the input type, how can i fire events everytime when user type something on textbox? Is there any way to keep using my textbox instead input type? Thanks – warang Feb 18 '13 at 22:30
Yes, behind the scenes ASP.Net generates an input box. Just adapt the JavaScript to use the ID you assigned your textbox and don't worry about the HTML portion. So, in your case you would reference "searchCompany" instead of "focusText". – lmortenson Feb 18 '13 at 22:34
Hi Imortenson I still didnt quite get it. So do you want me to use the second codes that you have wrote in here? I have tried but still seems not working. I have added your javascript and changed the name of textbox and tried to fire from C# using textbox.attribute.add(). Please help..T.T – warang Feb 18 '13 at 23:03
It looks like on every keypress you're posting back the whole page, is that correct? Doesn't the whole page refresh? – lmortenson Feb 18 '13 at 23:10
No it doesnt. it only changes my search field. I just have checked to put alert on javascript and it is not even go into the javascript when I type something on textbox. That is very weired because if I set the breakpoint on the line for textbox.attribute.add(), it seems it passed the line but javascript is not firing. Maybe I didnt put the code in a correct position..Any idea? – warang Feb 18 '13 at 23:18
Your textbox is losing focus because your page refreshes when you press a key. It may be too fast for you to notice but it is reloading when you postback. – lmortenson Feb 18 '13 at 23:33
Oh god...you are correct..the textbox was inside the updatepanel. That was why it just refreshes everytime when i type something. After taken it out from the updatepanel, it works great!! Thanks for your all help!!! – warang Feb 19 '13 at 01:02

How to set focus at the end of textbox while typing?

1 Answers1