Расширение Ajax HTML-редактора -textbox при нажатой клавише javascript вызывает другую функцию

Question

У меня есть расширитель HTML-редактора AJAX и текстовое поле в верхней части страницы, которое не является целевым элементом управления расширителя HTML-редактора.

При нажатой клавише есть метод JavaScript, написанный для вышеупомянутого текстового поля, но всякий раз, когда я пишу в текстовое поле и нажимаю ввод, вызывается другой метод JavaScript, который был написан для элемента управления с изображением кнопки. Как я могу это исправить?

Текстовое поле и кнопка-изображение размещаются одна за другой, а расширитель AJAX-редактора HTML располагается внутри панели обновления.

Я использую IE11, это может быть связано с версиями IE?

Вот пример моего кода:

<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

Это более вероятно (без вашего кода невозможно знать на 100%), что происходит сейчас:

• Текстовый редактор имеет onkeydown слушатель событий, который выполнит какое-то действие.
• Форма имеет onkeydown слушатель, который отправит форму, если нажата была клавиша ввода.
• Когда вы нажимаете клавишу ввода в текстовом редакторе, сначала он выполнит onkeydown редактора, тогда событие всплывет и продолжит выполнение связанных прослушивателей событий (до достижения формы и отправки ее).

Решением для этого было бы остановить распространение onkeydown событие с помощью stopPropagation()метод, когда клавиша ввода (keyCode = 13) нажата в текстовом редакторе. Таким образом, вы предотвратите выполнение любого кода, который будет выполнен следующим.

Вот простая демонстрация того, как это будет сделано:

// 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>

---

В вашем конкретном случае попробуйте добавить stopPropagation() в функции GetCertificate. Измените код на этот, и протестируйте снова, чтобы видеть, решает ли это проблему:

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;
      }
    }
  }
}