1

我有 AJAX HTML 编辑器扩展器和页面顶部的文本框，它不是 HTML 编辑器扩展器的目标控件。

在 key-down 上有一个为上述文本框编写的 JavaScript 方法，但是每当我写入文本框并按 Enter 键时，就会调用另一个为图像按钮控件编写的 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>
4

1 回答 1

0

这更有可能（如果没有您的代码，不可能 100% 知道）现在正在发生什么：

  • 文本编辑器有一个onkeydown事件监听器，它将执行一些操作。
  • 表单有一个onkeydown监听器，如果按下的键是回车键，它将提交表单。
  • 当您在文本编辑器中按下回车键时，首先它将执行onkeydown编辑器，然后事件将冒泡并继续执行关联的事件侦听器（直到到达表单并提交它）。

解决方案是在文本编辑器中按下回车键 (keyCode = 13) 时onkeydown使用该方法停止事件的传播。stopPropagation()这样，您将阻止执行接下来将执行的任何代码。

这是一个如何完成的简单演示：

// 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;
      }
    }
  }
}
于 2016-01-13T14:52:01.117 回答