0

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>

3
  • Have you tried this? stackoverflow.com/a/10894719/3042383 Commented Aug 28, 2017 at 17:26
  • Your code doesn't work. You forgot to add HTML to the snippet. So I don't understand what you are asking Commented Aug 28, 2017 at 17:38
  • You'll need to include your HTML so we can reproduce the issue. Commented Aug 28, 2017 at 17:52

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.