Textarea 줄 바꿈 이벤트 - Textarea jul bakkum ibenteu

== javascript 버전 ==

- textarea 의 줄바꿈 부분을 <br/>로 변경

var str = document.getElementById("textarea").value;

str = str.replace(/(?:\r\n|\r|\n)/g, '<br/>');

document.getElementById("textarea").value = str;

- <br/> 부분 줄바꿈 변경

var str = document.getElementById("textarea").value;

str = str.replaceAll("<br/>", "\r\n");

document.getElementById("textarea").value = str;

== jquery 버전 ==

- 줄바꿈 <br/>로 변경

var str = $('#textarea').val();

str = str.replace(/(?:\r\n|\r|\n)/g, '<br/>');

$('#textarea').val(str);

- <br/> 부분 줄바꿈 변경

var str = $('.#textarea').val();

str = str.split('<br/>').join("\r\n");

$('#textarea').val(str);

Front/Back-end

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

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

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

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

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

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

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

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