오늘은 TextArea를 가지고 유효성 검사와 복사붙이기 어떻게 활용하는지 알아볼건데요.
(이게 웹개발 할 때 은근 많이 사용하더라구요....)
물론 저는 html이나 jsp로 작성할 때 쓰고 있어서 다른 프론트는 어떻게 하는지 잘 모릅니다..
일단 먼저 TextArea를 만들어봐야겠죠??
[기본 html 작성]
<html>
<head>
</head>
<body>
<h1>TextArea 테스트</h1>
<textarea id="check-01"></textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
</script>
</body>
</html>이렇게 기본적으로 html파일을 만듭니다.
그 다음 그냥 작성하셔도 상관없긴해요.
하지만!
이대로 사용하면 데이터를 넣을 때 문제들이 발생할 수 있어 몇 가지 옵션을 넣어볼거에요.
<이벤트>
1. document.on("",function(){}) 사용
- Textarea를 사용하면 아무래도 작성이 중점이니 paste, keyup, change, input를 주로 사용합니다.
그래서 기본적인 위에 이벤트를 걸면 글을 쓸 때마다 저 function 안에 들어가게 됩니다.
[javascript]
<script>
$(document).on("change, input",function(){
console.log("textarea를 칠 때마다 여기 옵니다.");
});
</script>위와 같이 코드를 작성해주면 textarea에 글을 입력할 때마다 console 창에 문구가 보여집니다.
* 하지만 이건 textarea만 저 이벤트에 들어가는게 아니고 버튼, 체크박스 등 모든 변화가 일어날 때 들어가는 것이라. 주로 체크박스와 text 비교를 하면서 버튼 활성화를 비교하고자 할 때 사용하면 괜찮을 것 같아요.
만약! 모든 textarea 입력할 때 이벤트로 들어가고 싶다면 $(document) -> $("textarea") 로 변경해 주면 된다.
**** 번외
- addEventListener 이벤트도 있다.
<textarea id="check" ></textarea>
<script>
const textarea = document.querySelector('check');
textarea.addEventListener('input',function(){
// textarea에 입력된 값을 처리하는 로직 구간.
});
</script>위에 처럼 작성해주면 이벤트가 발생한다.
단, 특정 textarea id로 불러와 사용한다.
2. 공백 및 자리수 체크
- 글을 작성하면 저장을 할 때 DB안에 저장을 하잖아여 하지만 만약 " 가나다 "로 작성해서 그대로 DB에 넣으면 공백도 같이 넣기에 깔끔하지 않고 byte도 쓸데없이 소모하게 되겠죠!
DB에 그냥 넣을 경우 컬럼 데이터는 " 가나다 " 이렇게 보여지게 되겠죠...
그래서 앞에 공백을 입력하지 못하게와 저장을 할 때 앞뒤 공백을 지워버리고, 데이터베이스도 용량이 있듯이 10000자를 작성했다면 저장 오류가 발생 할 수 있으므로 DB 저장할 수 있는 데이터 양을 보고 길이 제한을 해주는게 좋습니다.
[javascript] : change, paste, input 으로 입력 값과 복사붙이기 할 때 들어가는 이벤트를 만들어 봤습니다.
<script>
// 요소의 변화와 input 작성을 했을 때 이벤트 발생.
$(document).on("change, paste, input",function(e){
const targetElement = e.target; // 이벤트 발생 타겟(요소)
const elementid = targetElement.id; // 이벤트 발생 요소 id
let textarea = document.getElementById(elementid); // 이벤트 발생 요소 불러오기.
textareaCheck(textarea); // 공백 및 길이 체크 함수
});
function textareaCheck(text){
// 공백체크
if(text.value.trim().length === 0){
text.value = text.value.replace(' ','');
}// 앞에 공백 체크 및 자리 수 체크
else if(text.value.trim().length != 0){
if(text.value[0] === ' '){
text.value = text.value.slice(1);
}
else if(text.value.trim().length > 100){
text.value = text.value.substring(0,100);
}
}
}
</script>위에 로직 코드를 보시면, textareaCheck 함수 안에 입력한 textarea 값을 넣어줍니다.
그럼 textarea 값의 길이를 첫 번째로 확인을 하고, 입력한 값이 있다면 else if 문으로 넘어가 다음 조건에 맞는 if 문으로 들어갑니다. 만약, 모든 조건의 해당이 없다면 전부 피해서 입력한 값이 잘 나오겠죠? ㅎㅎ
* 공백일 경우는 replace로 공백 부분을 없애줍니다.
* 공백이 아닐 경우 :
1) 첫 번째 자리에 공백이 있으면 그 앞에 공백을 슬라이스 해줍니다. (없앱니다.)
2) 입력한 값의 길이가 100자 이상을 경우 100자 이상은 모두 substring으로 잘라버립니다.
이렇게 작성하면, 데이터 저장할 때 용량 에러의 발생은 막을 수 있습니다.
하지만..... 특수기호를 작성하면 안될 경우.. 그럼 유효성 검사가 필요하죠!!
[javascript]
<script>
function characterCheck(text){
let regExp = /[!@#\"']/gi;
if(regExp.test(text.value)){
const spdata = text.value.replace(/[!@#\"']/gi,'');
text.value = spdata;
}
}
</script>위에 함수는 특정 특수기호를 작성했을 때, 그 값이 있는지 확인하고 있다면 replace로 없애줍니다.
이렇게 사용한다면 유효성 검사를 간단하게 처리할 수 있습니다. (복사붙이기도 먹히더라구요) ㅎㅎ
그 밖에도 여러 기능들을 이용해서 사용할 수 있지만, 기본적인 부분만 적용 시켜도 어느정도 퀄리티는 나올 것 같아요.
아직 배우는 단계이긴 하지만, 이렇게 기록을 하면서 복습형식으로 작성하니까
머릿속에 조금씩 들어가는 것 같아요 ㅎㅎ
이상 TextArea 활용 방법이었습니다.
모두 열심히 노력합시다. ㅎㅎ
'Programming_Language > JavaScript' 카테고리의 다른 글
| [tag/CSS] Text 띄어쓰기 JSP에서 적용하기 위해서는 <pre> 사용 (0) | 2024.01.30 |
|---|---|
| [Event] 반응형 - 페이지 이동 및 화면 크기 변경으로 load, resize 이벤트 화면 크기 변경해보자!! (0) | 2024.01.17 |
| [JavaScript] 뒤로가기 문제 해결은 이것! OnpageShow (0) | 2024.01.09 |
| [JQuery] 모달 팝업 동작 시 부모창 스크롤 동작 못하게 하기 (0) | 2024.01.09 |
| [JQuery] 특정 ID 속성이 "" 로 시작하는 모든 요소 선택 (0) | 2023.12.28 |
