2013-09-22 2 views
0

asp webforms 패널 컨트롤에 기본 단추가있는 여러 줄 입력란이 있습니다. 텍스트 영역의 다음 줄로가는 것보다 Enter (Return) 키를 눌러 양식을 제출해야합니다. 코드는 다음과 같습니다 : 나는 JQuery와 키 누르기 방법asp.net Webforms에서 Enter 키의 양식을 확인하기 위해 Multiline Textbox 사용

$("#<%= txtChat.ClientID %>").keypress(function (e) { 
      if (e.which == 13) { 
       // alert('You pressed enter!'); 
       return false; 
      } 
     }); 

과 노력하지만 양식이 엔터 (리턴) 키를 눌러 제출 받고되지

<asp:Panel ID="pnlChat" runat="server" CssClass="chat-entry" DefaultButton="btnChat"> 
    <p>Type Your Message and Press Enter</p> 
      <asp:TextBox ID="txtChat" runat="server" CssClass="span12" TextMode="MultiLine" Rows="4"></asp:TextBox> 
      <asp:Button ID="btnChat" runat="server" Text="Send" CssClass="btn" OnClick="btnChat_Click" /> 
</asp:Panel> 

. 제안/해결책을 가장 환영합니다.

btw : 패널이 업데이트 패널 안에 있습니다.

답변

2

UpdatePanel 외부에 숨겨진 버튼을두고 해당 버튼의 클릭 이벤트를 호출하여 양식을 제출할 수 있습니다.

... 
</asp:UpdatePanel> 
<asp:Button ID="Button1" runat="server" style="display:none" OnClick="btnSubmit_Click" /> 

코드에서 :

protected void btnSubmit_Click(object sender, EventArgs e) 
{ 
    //Do whatever you need 
} 

그리고 스크립트 :

$(document).ready(function() { 
    $("#<%= pnlChat.ClientID %>").on("keypress","#<%= txtChat.ClientID %>", function(e){ 
     if (e.which == 13) { 
      var s = $(this).val(); 
      $(this).val(s + "\n"); 
      $("#<%= btnSubmit.ClientID %>").trigger('click'); 
     } 
    }); 
}); 

하면 난 당신이 게시해야하는 이유를 이해하지 않지만 마크 업에서

UpdatePanel을 사용할 때 전체 양식.

+0

. updatepanel 안에'btnSubmit '을 넣으면 예상대로 작동합니다. 하나 이상의 업데이트 패널이있는 페이지에 여러 제출 버튼이 있습니다. textarea를 제출할 때이 업데이트 패널 내부의 내용 만 업데이트하려고했습니다. 만약 내가 btnsubmit textarea updatepanel 외부에 넣어, 전체 페이지 postbacking입니다. – Ravimallya

+0

'function pageLoad (sender, args) {// code here}'메서드 안에서 jquery 코드를 사용하여 부분적인 포스트 백 후에 스크립트가 작동하도록해야합니다. – Ravimallya

+0

이 스크립트는 pageload 외부에서 작동해야합니다! 이벤트를 사용하는 대신 '.on()'을 사용하여 매번 이벤트를 바인딩합니다. – afzalulh

1

여러 줄 입력란이 작동하지 않는 경우 버튼을 업데이트 패널 외부에 배치하십시오. 그 일은 나를 위해 완벽하게. 난 그냥 업데이트 패널 밖에서 내 ASP 버튼을 넣어. 여기 내 멀티 라인 텍스트 상자 텍스트가 작동하지 않을 때의 코드 샘플입니다.

<td style="float: center; padding-left: 155px;"> 
             <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
              <ContentTemplate> 
               <asp:Button ID="btnPre" OnClientClick="Validate();" ValidationGroup="group1" runat="server" 
                CssClass="alt_btn" Text="Preview Your Email" OnClick="btnPre_Click" TabIndex="8" /> 
               <asp:Button ID="Continue" OnClientClick="Validate();" ValidationGroup="group1" runat="server" 
                CssClass="alt_btn" Text="Continue" OnClick="Continue_Click" TabIndex="8" /> 
              </ContentTemplate> 
             </asp:UpdatePanel> 
            </td> 

그리고 업데이트 패널의 바깥 쪽에서 단추를 클릭하면 여러 줄로 된 텍스트 상자 텍스트가 완벽하게 업데이트됩니다. 솔루션에 대한 당신보다

<td style="float: center; padding-left: 155px;"> 
               <asp:Button ID="btnPre" OnClientClick="Validate();" ValidationGroup="group1" runat="server" 
                CssClass="alt_btn" Text="Preview Your Email" OnClick="btnPre_Click" TabIndex="8" /> 
               <asp:Button ID="Continue" OnClientClick="Validate();" ValidationGroup="group1" runat="server" 
                CssClass="alt_btn" Text="Continue" OnClick="Continue_Click" TabIndex="8" /> 
            </td> 
+0

흠. 하지만 우리의 요구 사항은 완벽하게 작동합니다. – Ravimallya

관련 문제