开发者

Set focus in TextBox after postback

开发者 https://www.devze.com 2023-01-22 00:44 出处:网络
I have a simple page where I want to filter a ListBox based upon a value(s) in a textbox - both are in an UpdatePanel.

I have a simple page where I want to filter a ListBox based upon a value(s) in a textbox - both are in an UpdatePanel.

This works correctly, however, after the postback the textbox had lost focus...so I set focus back in the page_load. Then I noticed that the cursor was now at the beginning of the text when I want it at the end so the user can carry on typing, so I added an onfocus(...) attribute to the textbox to set the value back to itself (see code below).

This works the first two times, but then it stops setting focus to the textbox?

Markup

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ListTest.aspx.cs" Inherits="SalesForceTest.ListTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" LoadScriptsBeforeUI="true"/>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox runat="server" ID="filter" AutoPostBack="true" onkeyup="__doPostBack(this.id, this.value)" onfocus="this.value = this.value;"  />
                <br />
                <asp:ListBox ID="AccountList" runat="server" Width="185px"></asp:ListBox>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

Codebehind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Text;

namespace SalesForceTest
{
    public partial class ListTest : System.Web.UI.Page
    {
        List<string> allAccounts = new List<string> { "2342", "3434", "2332", "3224", "7899", "8797", "3435" };

        protected void Page_Load(object sender, EventArgs e)
        {
            AccountList.Items.Clear();
            allA开发者_如何学运维ccounts.Where(ac => ac.StartsWith(filter.Text)).ToList().ForEach(a => AccountList.Items.Add(a));

            if (Page.IsPostBack)
            {
                if (Request.Form["__EVENTTARGET"] == filter.ID)
                {
                    ScriptManager1.SetFocus(filter);
                }
            }
        }
    }
}

Any help VERY gratefully received :)


You need to set the cursor/caret position at the end of text using java-script. Use below js function for the setting cursor position:

function setCaretTo(obj, pos) { 
    if(obj.createTextRange) { 
        /* Create a TextRange, set the internal pointer to
           a specified position and show the cursor at this
           position
        */ 
        var range = obj.createTextRange(); 
        range.move("character", pos); 
        range.select(); 
    } else if(obj.selectionStart) { 
        /* Gecko is a little bit shorter on that. Simply
           focus the element and set the selection to a
           specified position
        */ 
        obj.focus(); 
        obj.setSelectionRange(pos, pos); 
    } 
} 

source for above code: http://parentnode.org/javascript/working-with-the-cursor-position/

Now, what you need is ref to your client-side textbox object (document.getElementById) and text length (textbox.value.length). Call the function in the start-up script (registered via ScriptManager.RegisterStartupScript) method.

0

精彩评论

暂无评论...
验证码 换一张
取 消