-개요
빈번히 사용되는 textarea 태그 설정법을 정리하고자 한다.
-textarea 태그의 기본 속성-
onkeydown : 사용자가 키보드의 키를 '누를때' 적용
onkeyup : 사용자가 키보드의 키를 눌렀다가 '땟을때' 적용
-textarea 태그의 style 지정-
outline : textarea 영역 내부를 사용자가 클릭하였을때만 발생하는 외부 경계선
border : 기본 textarea의 외곽선이 설정되어있음
resize : none 속성이 아닐시 사용자가 임의로 textarea 영역의 크기를 조절할 수 있음
하단의 이미지는 resize가 none이 아닐경우 이미지
-textarea의 줄이 기본높이를 넘어가도 스크롤바 안생기게 하는 것
-글씨제한수에 맞춰서 초과시 클라이언트에게 경고를 주고 맥시멈글자수만큼 자르기
-둘다 javascript 로 작성
하단의 샘플은 현 블로그 게시글에서 말한 기능들을 전부넣었습니다
-*.html-
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!--덧글작성-->
<textarea onkeydown="resize(this)" onkeyup="fn_checkByte(this,300)" placeholder="내용을 입력해주세요"
style="width: 100%; min-height: 3rem; max-height: 9rem; resize: none;"
></textarea>
<!--//덧글작성-->
~~~
<div>
<span>Totalbyte</span>
</div>
<div>
<span>(</span><span id="nowByte">0</span><span>/</span><span>300</span><span>)</span>
</div>
|
cs |
2 : onkeydown , onkeyup 의 속성값으로 javascript함수를 각각 넣어주었습니다.
-*.js-
|
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
32
33
34
35
36
37
38
39
40
41
|
function resize(obj) {
obj.style.height = "1px";
obj.style.height = (12+obj.scrollHeight)+"px";
}
function fn_checkByte(obj,maxByte){ //maxByte:최대바이트
resize(obj);//resize
const text_val = obj.value; //입력한 문자
const text_len = text_val.length; //입력한 문자수
var cropped_text="";//잘라진 출력할 문자열
var texting_len=0;//글자단위의 길이(모든문자,한글포함)
let totalByte=0;//기록될바이트수
for(let i=0; i<text_len; i++){
const each_char = text_val.charAt(i);//한 글자씩 따옴
const uni_char = escape(each_char) //유니코드 형식으로 변환
if(uni_char.length>4){
// 한글 : 2Byte
totalByte += 2;
}else{
// 영문,숫자,특수문자 : 1Byte
totalByte += 1;
}
if(totalByte <=maxByte){//return할 문자열 갯수
texting_len=i+1;
}
}
if(totalByte>maxByte){
alert("최대 "+maxByte+"Byte까지만 입력가능합니다.");
document.getElementById("nowByte").innerText = totalByte;
document.getElementById("nowByte").style.color = "red";
cropped_text =text_val.substr(0,texting_len);//오바된만큼 자르기
obj.value=cropped_text;
fn_checkByte(obj,maxByte);
}else{
document.getElementById("nowByte").innerText = totalByte;
document.getElementById("nowByte").style.color = "green";
}
}
|
cs |
1~4 : textarea에 생긴 스크롤 길이에 12px을 더해서 textarea의 높이로 설정한다.
( obj.scrollHeight 가 유동적으로 변함에 따라 textarea의 높이도 유동적으로 변하게 된다.)
5 : fn_checkByte 함수에는 두가지 기능이 있다 .
1. resize 기능
2. 사용자가 제한된 바이트수를 초과하게 입력하면 추가된 만큼 crop 시켜준다.
35 : 제한된 크기만큼 잘려진 텍스트가 textarea에 들어간다.
36 : 35줄에서 textarea에 들어가는 텍스트가 변경되었으므로 , 재귀 호출 때려서 38~39줄이 실행되게 만든다.
하단의 이미지는 글자수제한을 넘겨서 입력하였을 경우의 이미지이다.
( ctrl+v 를 연타 하여서 텍스트글자수는 분명오바가 됬지만 표시상으로는 202 라고 나왔다.)
하단의 이미지는 윗 이미지에서 확인을 누를경우 , 글자수제한에 맞게 cropped된 이미지이다.
-참고
https://zetawiki.com/wiki/HTML_textarea_%EC%9E%90%EB%8F%99_%EB%86%92%EC%9D%B4_%EC%A1%B0%EC%A0%88
'21년이전 > front-end' 카테고리의 다른 글
| html - Form 태그 바깥에서 Form 내부 데이터들 서버로 전송하기 (0) | 2021.06.01 |
|---|---|
| js - 속성선택자 (0) | 2021.05.31 |
| Front - (CSS) float (0) | 2021.05.02 |
| Front - (html) inline, block , 콘텐츠 카테고리 ( 미완성) (0) | 2021.05.02 |
| front-end - 기본환경 맞추기(실행라이브러리,깃연결) (0) | 2021.05.02 |
