Ajax HTML editor extender -textbox on key down javascript calls another function

Question

I have AJAX HTML editor extender and a textbox on the top of the page which is not the target control of HTML editor extender.

On key-down there is a JavaScript method written for the above textbox, but whenever I write into the text box and press enter, another JavaScript method which was written for the image-button control is invoked. How can I fix that?

The textbox and the image-button are place one after other, and the AJAX HTML editor extender is place inside update panel.

I am using IE11, could it be something related to the IE versions?

Here is the a sample of my code:

<asp:Content ID="Content1" ContentPlaceHolderID="cphmain" runat="Server">

  <script language="javascript" type="text/javascript">

    Sys.Extended.UI.HtmlEditorExtenderBehavior.prototype._editableDiv_submit = function() {
      //html encode
      var char = 3;
      var sel = null;

      setTimeout(function() {
        if (this._editableDiv != null)
          this._editableDiv.focus();
      }, 0);

      if (Sys.Browser.agent != Sys.Browser.Firefox) {
        if (document.selection) {
          sel = document.selection.createRange();
          sel.moveStart('character', char);
          sel.select();
        } else {

          if (this._editableDiv.firstChild != null && this._editableDiv.firstChild != undefined) {
            sel = window.getSelection();
            //sel.collapse(this._editableDiv.firstChild, char);
          }
        }
      }

      //Encode html tags
      //this._textbox._element.value = this._encodeHtml();
      this._textbox._element.value = htmlDecode(this._textbox._element.value);
    }

    function htmlDecode(value) {
      return $("<div/>").html(value).text();
    }
  </script>

  <script type="text/javascript">

    /**Here is the method called on pressing enter key in the text box click below**/

    function GetCertificate(e, ctrl, len) {
      if (ValidateAlphaNumericAndMaxLength(e, ctrl, len)) {
        var keynum;
        var keyname;

        if (window.event) // IE
        {
          keynum = e.keyCode;
          if (keynum == 13) {
            ValidateID();
            return false;
          } else {
            return true;
          }
        }
      }
    }

    function ValidateID() {
      var ipno = document.getElementById('<%=txtuhid.ClientID%>').value;
      var txtlength = document.getElementById('<%=txtid.ClientID%>').value.length;

      if (ipno == "" || txtlength < 6) {
        ShowMsgBox('Certificate', 'Enter Valid ID ', 'OK', 'Information');
        return false;
      }
      else
        //__doPostBack('KEYDOWNUHID', 'ctl00_UpdatePanel2');
        __doPostBack('ctl00_UpdatePanel2', 'KEYDOWNUHID');
    }


    /**Here is the method called on image button click below**/

    function opensearchlCertificate(searchName, searchFilter, searchType) {
      var Return;
      var functionID, context, workStationID, orderType, iniFilter;
      var userName = 2;
      var featureName = -4;

      functionID = 0;
      context = null;
      workStationID = 0;
      orderType = "";

      iniFilter = searchFilter;

      var searchArgs = new Array(searchName, userName, featureName, functionID, context, workStationID, orderType, iniFilter);

      Return = window.showModalDialog('../Shared/CommonSearchPage.aspx', searchArgs, "dialogWidth:800px; dialogHeight:500px;scroll:no;")

      if (Return == null) {
        return false;
      }

      var result = Return.Result;
      var rowValueArray = Return.Result.split(",");

      for (var rowValue in rowValueArray) {
        //......
        //...
      }
    }

  </script>

  <div style="height: 10px">
  </div>

  <div class="forminner">
    <table cellpadding="0" border="0" cellspacing="0" width="100%">
      <tr>
        <td width="6%" nowrap="nowrap" class="label">
          <asp:Label ID="lbluhid" runat="server" Text="UHID"></asp:Label>
          <span class="requiredfield">*</span>
        </td>
        <td width="30%">

        <!-- here we are entering input and after that press enter key -->
          <asp:TextBox ID="txtid" runat="server" TabIndex="0" MaxLength="15" onkeydown="javascript:return GetMedicalCertificate(event, this, 20);"
                       CssClass="mandsearchtxtbox"></asp:TextBox>
          <asp:ImageButton ID="imgBtnSearch" TabIndex="1" ImageUrl="~/images/blank.gif" Width="23"
                           Height="19" CssClass="imgsearch" runat="server" OnClientClick="javascript:return opensearchCertificate('MRDMedicalCertificatePatientSearch','','single');" />
        </td>
      <tr>
      <tr>
        <td colspan="4">
          <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
              <%--<cc1:Editor ID="HtmlEditorMedicalCertificate" Width="99%" Height="200px" runat="server" />--%>
              <asp:TextBox ID="txtEditor" TextMode="MultiLine" Width="99%" Height="200px" runat="server" onkeydown="javascript:return Editorkeydown(event, this);" />

              <!-- Here is the html editor  below -->
              <ajaxToolkit:HtmlEditorExtender ID="HtmlEditorMedicalCertificate" EnableSanitization="false" DisplaySourceTab="true" TargetControlID="txtEditor" runat="server" ></ajaxToolkit:HtmlEditorExtender>
            </ContentTemplate>
            <Triggers>
              <asp:PostBackTrigger ControlID="txtEditor" />
            </Triggers>
          </asp:UpdatePanel>
      </tr>
    </table>

    <div class="clear">
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <Triggers>
          <asp:PostBackTrigger ControlID="imgBtnSearch" />
        </Triggers>
      </asp:UpdatePanel>
    </div>

  </div>
</div>
</asp:Content>

Answer 1

This is more likely (it's not 100% possible to know without your code) what is happening right now:

• The text editor has a onkeydown event listener that will perform some action.
• The form has a onkeydown listener that will submit the form if the key pressed was the enter key.
• When you hit the enter key while in the text editor, first it will perform the onkeydown of the editor, then the event will bubble and continue executing the associated event listeners (until reaching the form and submitting it).

The solution for this would be to stop the propagation of the onkeydown event by using the stopPropagation() method when the enter key (keyCode = 13) is pressed in the text editor. That way, you will prevent the execution of whatever code would be executed next.

Here is a simple demo of how it would be done:

// onkeydown event listener for the text editor/textarea
document.querySelector("textarea").onkeydown = function(e) {

  // your code here...

  // if the key pressed is enter, then stop event propagation
  if (e.keyCode == 13) {
    e.stopPropagation();
  }
}

// onkeydown event listener for the form
document.querySelector("form").onkeydown = function(e) {

  // submit the form when the enter key is pressed in any field
  if (e.keyCode == 13) {
    //this.submit();
    alert("Submit Form");
  }
}

<form>
  <textarea>This is a test</textarea><br/>
  <input type="submit" value="Submit Form" />
</form>

---

In your particular case, try adding the stopPropagation() in the GetCertificate function. Change the code to this, and test again to see if that solves the issue:

function GetCertificate(e, ctrl, len) {
  if (ValidateAlphaNumericAndMaxLength(e, ctrl, len)) {

    // NEW - stop the propagation of the event
    e.stopPropagation();

    var keynum;
    var keyname;

    if (window.event) // IE
    {
      keynum = e.keyCode;
      if (keynum == 13) {
        ValidateID();
        return false;
      } else {
        return true;
      }
    }
  }
}