With this JavaScript code, I have to click off of the textbox and then click again in order to select another textbox (focus). Clicking once allows me to edit the field, clicking on another element loses the focus but then I have to click for a second time. I just want to be able to click through each element without the double clicking. Here are the functions used:
function Description_OnClick(guid) {
try{
if (HasEditPermission){
var textbox = document.getElementById("MainContent_Textbox" + guid);
var label = document.getElementById("MainContent_Label" + guid);
textbox.maxLength = 64;
label.style.visibility = 'hidden';
label.style.display = 'none';
textbox.style.visibility = 'visible';
textbox.style.display ='block';
textbox.focus();
}
}
catch (ex) {
alert('DocumentManager exception in Description_OnClick: ' + ex.description);
}
}
function Description_EnterKey(event, guid) {
//EnterKey function not working with timeout in firefox & chrome couldn't work without it
try {
var isChromium = window.chrome;
vendorName = window.navigator.vendor;
isIEedge = window.navigator.userAgent.indexOf("Edge") > -1;
if (event.keyCode == 13){
if(isChromium !== null && isChromium !== undefined && vendorName === "Google Inc." && isIEedge == false) {
// is Google chrome
setTimeout(function(){ Description_LoseFocus(event, guid); }, 0);
}
else {
// not Google chrome
Description_LoseFocus(event,guid);
}
}
}
catch (ex) {
alert('FormManager exception in Description_EnterKey: ' + ex.description);
}
}
function Description_LoseFocus(event, guid) {
try {
var label = document.getElementById("MainContent_Label" + guid);
var textbox = document.getElementById("MainContent_Textbox" + guid);
var button = document.getElementById('<%=Me.DescriptionButton.ClientID %>')
label.innerText = textbox.value;
var newDescriptionHiddenField = document.getElementById('<%=Me.NewDescriptionHiddenField.ClientID %>')
newDescriptionHiddenField.value = textbox.value
var documentGuid = document.getElementById('<%=Me.GuidHiddenField.ClientID %>')
documentGuid.value = guid
label.style.visibility = 'visible';
textbox.style.visibility = 'visible';
button.click();
}
catch (ex) {
alert('DocumentManager exception in Description_LoseFocus ' + ex.description);
}
}
HTML
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="applicationPanel">
<div id="ContentAreaMargin" style="margin-top: 10px; margin-right: 10px; margin-bottom: 0px; margin-left: 10px;">
<asp:Label ID="EmployeeNameLabel" runat="server" CssClass="smallTitle"></asp:Label>
<asp:Label ID="DomainNameLabel" runat="server" Text="" CssClass="domainNameTitle" />
<br />
<br />
<igtxt:WebImageButton ID="NewDocumentWebImageButton" runat="server" UseBrowserDefaults="False"
Text="New Document" Width="100px" Height="27px" TabIndex="5" AutoSubmit="False"
CausesValidation="False" EnableViewState="False">
<focusappearance>
<InnerBorder ColorBottom="119, 138, 153" ColorLeft="242, 246, 249" ColorRight="119, 138, 153"
ColorTop="242, 246, 249" StyleBottom="Solid" StyleLeft="Solid" StyleRight="Solid"
StyleTop="Solid" WidthBottom="1px" WidthLeft="1px" WidthRight="1px" WidthTop="1px" />
<ButtonStyle CssClass="focusbutton">
</ButtonStyle>
</focusappearance>
<clientsideevents click="NewDocumentWebImageButton_Click" />
<appearance>
<InnerBorder ColorBottom="119, 138, 153" ColorLeft="242, 246, 249" ColorRight="119, 138, 153"
ColorTop="242, 246, 249" StyleBottom="Solid" StyleLeft="Solid" StyleRight="Solid"
StyleTop="Solid" WidthBottom="1px" WidthLeft="1px" WidthRight="1px" WidthTop="1px" />
<ButtonStyle CssClass="defaultbutton">
</ButtonStyle>
</appearance>
<pressedappearance>
<InnerBorder ColorBottom="242, 246, 249" ColorLeft="119, 138, 153" ColorRight="242, 246, 249"
ColorTop="119, 138, 153" StyleBottom="Solid" StyleLeft="Solid" StyleRight="Solid"
StyleTop="Solid" WidthBottom="1px" WidthLeft="1px" WidthRight="1px" WidthTop="1px" />
<ButtonStyle CssClass="pressedbutton">
</ButtonStyle>
</pressedappearance>
</igtxt:WebImageButton>
<table id="TopSpacerTable" border="0" cellpadding="0" cellspacing="0">
<tr id="TopSpacerTr" style="height: 10px">
<td colspan="2" id="TopSpacerTd" />
</tr>
</table>
</div>
<asp:UpdatePanel ID="FormsUpdatePanel" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
<ContentTemplate>
<div id="ResultsDiv" style="margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: 10px;"
runat="server">
<table id="DocumentsHeaderTable" runat="server" class="documentSelectorTable">
<tr class="documentSelectorTableHeader">
<td style="width: 30px;">
<asp:CheckBox ID="SelectAllCheckBoxHeader" runat="server" ToolTip="Select All" TabIndex="6"
onclick="SelectAllDeleteCheckBoxes()" />
</td>
<td style="width: 150px;">Date/Time Added
</td>
<td style="width: 150px;">Type
</td>
<td style="width: 307px;">Description
</td>
<td style="width: 150px;">Original File Name
</td>
<td style="width: 150px;">Added By
</td>
</tr>
</table>
<div id="DocumentsTableDiv" style="height: 397px; overflow-y: auto; overflow-x: hidden; float: left;">
<table id="DocumentsTable" runat="server" class="documentSelectorTable">
</table>
</div>
<div style="clear: both; padding-top: 5px; padding-bottom: 5px;">
<asp:Label ID="MoreThan100Label" runat="server" CssClass="defaultLabel" Style="display: none;"
Text="The search results gave more documents than can be displayed. To see all results, put in a more specific search value." />
</div>
<igtxt:WebImageButton ID="DeleteWebImageButton" runat="server" UseBrowserDefaults="False"
OnClick="DeleteWebImageButton_Click" Text="Delete" Width="70px" Height="27px" TabIndex="5"
EnableViewState="False" AutoSubmit="False" CausesValidation="False">
<appearance contentshift="None">
<ButtonStyle CssClass="defaultbutton" />
<InnerBorder ColorBottom="119, 138, 153" ColorLeft="242, 246, 249" ColorRight="119, 138, 153"
ColorTop="242, 246, 249" StyleBottom="Solid" StyleLeft="Solid" StyleRight="Solid"
StyleTop="Solid" WidthBottom="1px" WidthLeft="1px" WidthRight="1px" WidthTop="1px" />
</appearance>
<focusappearance>
<InnerBorder ColorBottom="119, 138, 153" ColorLeft="242, 246, 249" ColorRight="119, 138, 153"
ColorTop="242, 246, 249" StyleBottom="Solid" StyleLeft="Solid" StyleRight="Solid"
StyleTop="Solid" WidthBottom="1px" WidthLeft="1px" WidthRight="1px" WidthTop="1px" />
<ButtonStyle CssClass="focusbutton" />
</focusappearance>
<pressedappearance>
<InnerBorder ColorBottom="242, 246, 249" ColorLeft="119, 138, 153" ColorRight="242, 246, 249"
ColorTop="119, 138, 153" StyleBottom="Solid" StyleLeft="Solid" StyleRight="Solid"
StyleTop="Solid" WidthBottom="1px" WidthLeft="1px" WidthRight="1px" WidthTop="1px" />
<ButtonStyle CssClass="pressedbutton" />
</pressedappearance>
<disabledappearance>
<InnerBorder ColorBottom="119, 138, 153" ColorLeft="242, 246, 249" ColorRight="119, 138, 153"
ColorTop="242, 246, 249" StyleBottom="Solid" StyleLeft="Solid" StyleRight="Solid"
StyleTop="Solid" WidthBottom="1px" WidthLeft="1px" WidthRight="1px" WidthTop="1px" />
<ButtonStyle CssClass="disabledButton" />
</disabledappearance>
<clientsideevents click="DeleteWebImageButton_Click" />
</igtxt:WebImageButton>
<igtxt:WebImageButton ID="PrintSelectedWebImageButton" runat="server" UseBrowserDefaults="False"
Text="Print Selected" Width="100px" Height="27px" TabIndex="5" AutoSubmit="False"
CausesValidation="False" EnableViewState="False">
<focusappearance>
<InnerBorder ColorBottom="119, 138, 153" ColorLeft="242, 246, 249" ColorRight="119, 138, 153"
ColorTop="242, 246, 249" StyleBottom="Solid" StyleLeft="Solid" StyleRight="Solid"
StyleTop="Solid" WidthBottom="1px" WidthLeft="1px" WidthRight="1px" WidthTop="1px" />
<ButtonStyle CssClass="focusbutton">
</ButtonStyle>
</focusappearance>
<clientsideevents click="PrintSelectedWebImageButton_Click" />
<appearance>
<InnerBorder ColorBottom="119, 138, 153" ColorLeft="242, 246, 249" ColorRight="119, 138, 153"
ColorTop="242, 246, 249" StyleBottom="Solid" StyleLeft="Solid" StyleRight="Solid"
StyleTop="Solid" WidthBottom="1px" WidthLeft="1px" WidthRight="1px" WidthTop="1px" />
<ButtonStyle CssClass="defaultbutton">
</ButtonStyle>
</appearance>
<pressedappearance>
<InnerBorder ColorBottom="242, 246, 249" ColorLeft="119, 138, 153" ColorRight="242, 246, 249"
ColorTop="119, 138, 153" StyleBottom="Solid" StyleLeft="Solid" StyleRight="Solid"
StyleTop="Solid" WidthBottom="1px" WidthLeft="1px" WidthRight="1px" WidthTop="1px" />
<ButtonStyle CssClass="pressedbutton">
</ButtonStyle>
</pressedappearance>
</igtxt:WebImageButton>
<asp:HiddenField ID="DocumentsToDeleteHiddenField" runat="server" Value="" />
<asp:HiddenField ID="NewDescriptionHiddenField" runat="server" Value="" />
<asp:HiddenField ID="GuidHiddenField" runat="server" Value="" />
<asp:HiddenField ID="DocumentHiddenField" runat="server" Value="-1" />
<asp:Button Style="visibility: hidden;" ID="OpenButton" runat="server" />
<asp:Button Style="visibility: hidden;" ID="DescriptionButton" runat="server" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<table style="width: 966px;" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td style="text-align: right; border-width: 0px; width: 168px;"></td>
</tr>
</table>
<div id="HiddenDiv" style="display: none">
<asp:Button ID="NewDocumentButton" runat="server" Text="New" OnClientClick="if (NewDocumentButton_Click() == true) { return true; }"
CausesValidation="False" UseSubmitBehavior="False" Height="0px" Width="0px" EnableViewState="false" />
<asp:Button ID="CancelButton" runat="server" Text="Button" Height="0px" Width="0px" />
<asp:HiddenField ID="EmployeeNameHiddenField" runat="server" EnableViewState="false" />
<asp:HiddenField ID="ActiveRowGuidHiddenField" runat="server" EnableViewState="false" />
</div>
</div>
<igLayout:WebDialogWindow ID="NewDocumentWebDialogWindow" runat="server" BorderWidth="0"
Width="700px" Height="426px" WindowState="Hidden" Top="125px" InitialLocation="Manual"
Left="150px" Modal="true">
<header height="22px" closebox-visible="false" />
<contentpane scrollbars="Hidden"
style="width: 698px; height: 402px; border: 0px" frameborder="0" marginheight="0"
marginwidth="0" scrolling="no">
</contentpane>
</igLayout:WebDialogWindow>
<div id="ViewButtonHiddenDiv" style="display: none;">
<asp:HiddenField ID="DisableGridCellClickHiddenField" runat="server" EnableViewState="false" />
<asp:Button ID="ViewButton" Width="50" Height="50" runat="server" Text="View" EnableViewState="false" />
</div>