JQuery를 사용하여 Ctrl Enter를 구현하여 form_jquery를 제출하는 방법

때때로 문제를 해결하기 위해 마우스 대신 키보드 키 조합을 사용합니다. 오늘날 우리는 JQuery를 사용하여 Ctrl Enter를 구현하여 양식을 제출합니다.

게시 시 콘텐츠 입력창에 내용을 입력하신 후 '제출' 버튼을 클릭하시면 콘텐츠를 게시하실 수 있습니다. 그러나 충분히 "게으르다"면 마우스를 움직이지 않고 키보드의 Ctrl Enter 키를 눌러 양식을 제출하고 콘텐츠 게시를 완료할 수 있습니다.
물론 입력 상자는 여러 줄의 텍스트 입력 상자 텍스트 영역이므로 텍스트 영역에서 Enter 키를 누르면 줄이 변경될 수 있으며 양식을 직접 제출(제출)할 수 없다는 것을 알고 있습니다. 기본적으로 브라우저는 Ctrl 키를 무시합니다. . 그런 다음 Javascript 스크립트를 사용하여 Ctrl Enter 키 조합의 사용을 제어하여 양식 제출을 완료할 수 있습니다. 이 기사에서는 예제를 사용하여 jQuery를 기반으로 한 Ctrl Enter 양식 제출의 효과를 설명합니다.
HTML
페이지 본문에는 텍스트 영역 입력 상자, 제출 버튼 및 제출된 결과를 표시하는 div#result를 배치합니다.

<div id="result"></div> 
<textarea name="msg" id="msg" placeholder="输入内容" autofocus></textarea> 
<button type="submit">提 交</button><span>可按“Ctrl+Enter”键提交</span> 

CSS
제출 후 콘텐츠를 표시하기 위한 텍스트 영역 입력 상자, 버튼 제출 버튼 및 .post 스타일을 수정하려면 CSS 몇 줄을 작성하기만 하면 됩니다.

textarea {display:block; width:450px;height:100px;border: 1px solid #ccc;} 
button {border: 1px solid #ccc; background: #ececec;-webkit-border-radius: 3px; 
-moz-border-radius: 3px;margin-top: 10px;padding: 5px 20px; cursor:pointer} 
.post{width: 230px;border: 1px solid #ccc;background: #ececec; padding: 10px; margin: 10px 0;} 

jQuery
먼저 jQuery 라이브러리를 미리 로드해야 합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

두 개의 매개변수를 사용하는 간단한 플러그인 ctrlEnter()를 작성해 보겠습니다. 첫 번째 매개변수 btns는 플러그인이 작동하는 요소를 나타내고 두 번째 매개변수는 각 매개변수 fn은 호출되는 함수를 나타냅니다. 내부적으로 호출되는지 확인하기 위해 PerformAction() 함수를 플러그인에 추가합니다. 그런 다음 플러그인은 키보드 이벤트를 수신하기 시작합니다. 키다운 키보드의 키를 누르면 Enter 키와 Ctrl 키가 눌렸는지 확인한 다음 PerformAction()을 호출하고 기본 캐리지 리턴 및 줄 바꿈을 방지합니다. 행동. . 그런 다음 클릭 이벤트를 버튼에 바인딩하고 PerformAction()을 호출하여 버튼을 클릭하여 콘텐츠를 제출할 수 있도록 해야 합니다.

$.fn.ctrlEnter = function (btns, fn) { 
   var thiz = $(this); 
   btns = $(btns); 
     
   function performAction (e) { 
     fn.call(thiz, e); 
   }; 
   thiz.bind("keydown", function (e) { 
    if (e.keyCode === 13 && e.ctrlKey) { 
      performAction(e); 
      e.preventDefault(); //阻止默认回车换行 
    } 
   }); 
   btns.bind("click", performAction); 
} 

마지막으로 ctrlEnter를 호출하여 텍스트 영역의 콘텐츠를 #result에 제출하고 캐리지 리턴을 br로 바꾸고 텍스트 영역을 지웁니다. 물론 실제 애플리케이션에서는 콘텐츠가 백그라운드 처리 프로그램에 게시되어야 하며, 백그라운드 프로그램 PHP 및 기타 프로세스가 콘텐츠와 데이터 상호 작용을 처리해야 합니다.

$("#msg").ctrlEnter("button", function () { 
    $("<p class='post'></p>").append(this.val().replace(/\n/g, "<br/>")).fadeIn('slow') 
.appendTo("#result"); 
    this.val(""); 
}); 

위는 JQuery를 사용하여 Ctrl Enter를 구현하여 양식을 제출하는 방법입니다. 이 기사가 귀하의 연구에 도움이 되기를 바랍니다.