고군분투

부트스트랩 입력란 줄바꿈

2022. 8. 21. 01:20

입력란(textarea)에 줄바꿈 그대로 적용시켜서 저장하는 방법

style="white-space:pre-wrap"

또는 css 별도 적용

<div> <pre> 마다 상세 효과가 다른듯  

 

*style에 여러 항목 입력할 경우 "," 아닌 ";" 로 구분. ""는 전체 묶을때만.

 

 

 

부트스트랩에서가져온 textarea라면 어떻게 설정하나.. -->자체 id변수값으로 설정하는 법 찾지못함..

 

직접 설정해줌

먼저 DB에 어떻게 저장되어있는지 확인해본다.

-> jquery로 설정하는 방법

 //줄바꿈(엔터)을 <br/>로 변경하기
var 변수 = $('#textarea').val();
변수 = str.replace(/(?:\r\n|\r|\n)/g, '<br/>');
$('#textarea').val(변수);
  //저장하고 불러오는동안 입력창에 <br/>이 그대로 뜬다

 //DB에 줄바꿈 되어 저장되어있는 거라면 아래 내용만 적용 (ajax GET 응답 받은 후에)
 // <br/> 부분을 줄바꿈으로 변경하기
변수 = 변수.split('<br/>').join("\r\n");
$('#textarea').val(변수);

/?:/g ----> 정규식이라는것

 

**) \r\n , \r , \n이 무엇인가?

https://sunnyscript.tistory.com/39

 

줄바꿈 언어

<개행문자> \r = CR (캐리지 리턴) → X 이전 Mac OS에서 줄 바꾸기 문자로 사용됨 \n = LF (줄 바꿈) → Unix / Mac OS X에서 줄 바꾸기 문자로 사용 \r\n = CR + LF → Windows에서 줄 바꾸기 문자로 사용 HT..

sunnyscript.tistory.com

 

 

-> javascript 로 설정하는 방법

//줄바꿈(엔터) 부분을 <br/>로 변경하기
var 변수 = document.getElementById("textarea").value;
변수 = 변수.replace(/(?:\r\n|\r|\n)/g, '<br/>');
document.getElementById("textarea").value = 변수;

//<br/> 부분을 줄바꿈으로 변경하기
변수 = 변수.replaceAll("<br/>", "\r\n");
document.getElementById("textarea").value = 변수;

 

var과 let의 차이??

우선 위의 var은 let으로 선언해도 가능 했음

https://www.howdy-mj.me/javascript/var-let-const/