Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

제뉴어리의 모든것

[Web] HTML TextArea 를 shift enter 와 enter 로 제어하기 본문

HTML

[Web] HTML TextArea 를 shift enter 와 enter 로 제어하기

제뉴어리맨 2021. 3. 30. 15:38

이번 포스트에서는 js 와 html 을 이용한 textarea를 shift enter 로 제어하는 방법에 대해서 알아볼 것이다.

 

기존의 textarea 는 enter 를 누르면 한 칸이 내려가는 형식인데, SQL 문을 사용하는 등 기타 이유로 enter 가 submit 을, shift + enter 가 한 칸 줄 바꿈을 하고 싶을 때가 있다. 아래의 예를 들어보면 편하다.

 

 

 

위의 TextArea 는 엔터를 하면 한 줄이 내려간다. 그러나 아래의 경우는?

 

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="test.css">
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<TITLE>alice_k106's post example</TITLE>
<SCRIPT>
 
$(function() {
    $('textarea').on('keydown', function(event) {
        if (event.keyCode == 13)
            if (!event.shiftKey){
                event.preventDefault();
                $('#testForm').submit();
            }
    });
    
    $('#testForm').on('submit', function() {
        button_click();
    });
    
    function button_click() {
        alert("you pressed submit button!");
    }
});
    
</SCRIPT>
</HEAD>
 
<BODY>
    <form id="testForm">
        <textarea rows="20" cols="100"></textarea>
        <button type="submit" onclick="button_click();">master piece </button>
    </form>
 
</BODY>
</HTML>
 
Colored by Color Scripter

TextArea 에 약간의 jquery 를 추가했다. 위를 그대로 html 파일에 복사 및 붙여넣기 한 다음, 엔터를 누르면 줄바꿈이 아니라 버튼이 눌려지는 것을 확인할 수 있다. 물론 shift + enter 를 통해서 줄바꿈이 가능하다.

 

주요한 내용은, textarea 에서 키를 눌렀을 때 그것이 엔터인지, shift 인지 판별 한 뒤 testForm의 form 을 submit 해주는 것이다. 별 거 없으니 복사 및 붙여넣기 해보면 된다.

 

아니면 아래와 같은 형식으로도 사용이 가능하다.

 

$(function() {
  $('textarea').on('keydown', function(event) {
      if (event.keyCode == 13)
          if (!event.shiftKey){
             event.preventDefault();
             var button=document.getElementById('query_send');
             
             button.click();
             $('textarea').empty()
          }
  });
 
});

위의 코드는 textarea 영역에서(focus) 엔터가 눌렸을때, 하지만 shift키는 눌리지 않았을 경우.

 

 

keydown 시 버튼의 id element를 가져 와서 그 버튼을 click 해주는 방식이다. 클릭이 된 뒤에는 textarea를 clear 해준다. 이 때에는 onclick 이 아니라 ajax 로 해당 id 에 call 을 달아주도록 하자.

 

출처 : 

januaryman.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F

'HTML' 카테고리의 다른 글

placeholder 줄바꿈  (0) 2021.04.01
[html] meta 태그 사용법  (0) 2021.03.31
input 전화번호 형식으로 입력받기  (0) 2021.03.30
readonly 속성 추가/제거  (0) 2021.03.30
textarea 줄바꿈 처리 ('\n', 개행문자) - p태그에 줄 바꿈 적용  (0) 2021.03.30
'HTML' Related Articles more