Restore the lost focus of Auto post back controls in asp.net update Panel control
Problem:
We put autopostback controls like textbox, DropDownList controls inside in update panel to reducing the flickering of the Page.but when user uses tab for entering the details the focus of the control losts. Web site users who prefer to use keyboard need to use mouse to activate appropriate input box or press TAB multiple times.
Solution:
Step 1:
Save following in js file give any name to it (like MyUpdatePanelFocus.js)
Step 2: Do the following setting in aspx page
That's it you have done it!!!!
We put autopostback controls like textbox, DropDownList controls inside in update panel to reducing the flickering of the Page.but when user uses tab for entering the details the focus of the control losts. Web site users who prefer to use keyboard need to use mouse to activate appropriate input box or press TAB multiple times.
Solution:
Step 1:
Save following in js file give any name to it (like MyUpdatePanelFocus.js)
var lastFocusedControlId = "";
function focusHandler(e) {
document.activeElement = e.originalTarget;
}
function appInit() {
if (typeof (window.addEventListener) !== "undefined") {
window.addEventListener("focus", focusHandler, true);
}
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);
}
function pageLoadingHandler(sender, args) {
lastFocusedControlId = typeof (document.activeElement) === "undefined"
? "" : document.activeElement.id;
}
function focusControl(targetControl) {
if (Sys.Browser.agent === Sys.Browser.InternetExplorer) {
var focusTarget = targetControl;
if (focusTarget && (typeof (focusTarget.contentEditable) !== "undefined")) {
oldContentEditableSetting = focusTarget.contentEditable;
focusTarget.contentEditable = false;
}
else {
focusTarget = null;
}
targetControl.focus();
if (focusTarget) {
focusTarget.contentEditable = oldContentEditableSetting;
}
}
else {
targetControl.focus();
}
}
function pageLoadedHandler(sender, args) {
if (typeof (lastFocusedControlId) !== "undefined" && lastFocusedControlId != "") {
var newFocused = $get(lastFocusedControlId);
if (newFocused) {
focusControl(newFocused);
}
}
}
Sys.Application.add_init(appInit);
Step 2: Do the following setting in aspx page
<asp:ScriptManager ID="c_scriptManager" runat="server">
<Scripts>
<asp:ScriptReference Path="~/MyUpdatePanelFocus.js" />
</Scripts>
</asp:ScriptManager>
That's it you have done it!!!!
Thank you soooo much this is the only script i have found that has worked the way i wanted it to and was easy to implement.
ReplyDeleteGOOd work friend......keep it up.i am seraching thgis type code
ReplyDeleteNice!
ReplyDeleteNice work, worked perfectly.
ReplyDeleteHi,
ReplyDeleteBut it's not working in ModlelPopupExtender.
u people having any solution.
oh nice yaar it is working ......thanks dear
ReplyDeleteThanks brodda
ReplyDeleteGreat Work.. After a long search got a perfect solution.
ReplyDeleteReally good concept (the most important pat). Great would be to also keep the cursor position for cases when user is in middle of editing.
ReplyDeleterealy great work!
ReplyDeleteworks like charm
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteI have tried this but the issue is that the position of the cursor is not being set to where the user clicked after editing in the previous text area. but if there is no edit to the previous control, the cursor position is maintained and is set to the user's desired location. Could anyone please help on this
ReplyDeleteWorking perfectly
ReplyDeleteThanks - this is brilliant.
ReplyDeleteGenius!
ReplyDeleteWorking...Thanks You
ReplyDelete