출처1 : textarea 글자수 제한 / 바이트(Byte) 제한 (tistory.com)
textarea 글자수 제한 / 바이트(Byte) 제한
textarea 글자수 제한 / 바이트(Byte) 제한 클라이언트로부터 입력받고자 하는 텍스트가 긴 문자열의 경우, textarea태그를 설정하여 받게됩니다. 이 때, 입력받을 수 있는 최대 바이트수를 정해두고
hellcoding.tistory.com
출처 2: Edit fiddle - JSFiddle - Code Playground
Edit fiddle - JSFiddle - Code Playground
jsfiddle.net
TextArea 입력 줄 수 Count 및 , 한 줄당 입력 byte 체크 해보기 위하여 테스트를 진행 해보았습니다...
<html lang="ko">
<head>
<meta charset="euc-kr">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
<meta name="viewport" name="viewport" content="width=1024">
<meta name="robots" content="index,follow" />
<meta name="subject" content="테스트" />
<meta name="keywords" content="테스트" />
<meta name="description" content="테스트" />
<meta name="copyright" content="copyrights 2022" />
<meta name="classification" content="internet" />
<meta name="distribution" content="global" />
<meta name="language" content="ko" />
<title>TextAreaText</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<script type="text/javascript" src="/scripts/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/scripts/jquery-ui-1.13.1/jquery-ui.min.js"></script>
<span id="spTextLine"></span>/39줄
<br/>
<span id="spTextByte"></span>/80Byte
<br/>
<textarea id="txtContents" style="width:50%;height:50%"></textarea>
<script language="javascript">
var txtContents_prev = "";
$(document).ready(function() {
$("#txtContents").keyup(function() {
let curPosition = this.selectionStart;
let curLineNumber = this.value.substr(0 , this.selectionStart).split("\n").length;
let curLineText = this.value.split("\n")[curLineNumber-1];
let curTextByte = 0;
for(let i = 0 ; i < curLineText.length ; i ++) {
const each_char = curLineText.charAt(i);
const uni_char = escape(each_char);
if(uni_char.length > 4 ) curTextByte += 2;
else curTextByte += 1;
}
if(curTextByte > 80) {
alert("현재 입력 줄의 글자 Byte가 80byte를 초과 하였습니다. 다시 확인 하여 주시기 바랍니다.");
this.value = txtContents_prev;
} else if(curLineNumber > 38) {
alert("현재 입력 줄이 38줄을 초과 하였습니다. 다시 확인 하여 주시기 바랍니다.");
this.value = txtContents_prev;
} else {
$("#spTextLine").text( (curLineNumber-1).toString() );
$("#spTextByte").text( (curTextByte).toString() );
txtContents_prev = this.value;
}
});
$("#txtContents").focus();
$("#txtContents").trigger("keyup");
});
</script>
2022.06.23 일 추가 내용 , 조금 더 개선해보았습니다 -_-;;
(1) . Ctrl+v로 키 입력 시에 라인 별 검사
(2). 마우스 클릭 시에 커서 라인과 , 해당 라인의 글자 수 표시 하게
<html lang="ko">
<head>
<meta charset="euc-kr">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1">
<meta name="viewport" name="viewport" content="width=1024">
<meta name="robots" content="index,follow" />
<meta name="subject" content="테스트" />
<meta name="keywords" content="테스트" />
<meta name="description" content="테스트" />
<meta name="copyright" content="copyrights 2022" />
<meta name="classification" content="internet" />
<meta name="distribution" content="global" />
<meta name="language" content="ko" />
<title>TextAreaText</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<script type="text/javascript" src="/scripts/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/scripts/jquery-ui-1.13.1/jquery-ui.min.js"></script>
<span id="spTextLine"></span>/39줄
<br/>
<span id="spTextByte"></span>/80Byte
<br/>
<textarea id="txtContents" style="width:50%;height:50%;"></textarea>
<script language="javascript">
var txtContents_prev = "";
var ctrlVKeyCheck;
$(document).ready(function() {
$("#txtContents").click(function() {
$("#txtContents").trigger("keyup");
});
$("#txtContents").keydown(function(e) {
if(e.ctrlKey && e.key == "v") {
console.log("ctrl+v keydown");
ctrlVKeyCheck = true;
}
});
$("#txtContents").keyup(function(e) {
let curPosition = this.selectionStart;
let curLineNumber = this.value.substr(0 , this.selectionStart).split("\n").length;
let curLineText = this.value.split("\n")[curLineNumber-1];
//2022.06.23 김영대 keyCode == 86 일때 즉 ctrl + v 를 붙여넣었을때
if(ctrlVKeyCheck) {
let tempStr = "";
// 전체 Line 체크 진행
for(let i = 0 ; i < curLineNumber ; i++) {
curLineText = this.value.split("\n")[i];
if(!checkTextArea(curLineText,curLineNumber)) {
// 성공한 영역 까지만 값을 붙여 넣음
this.value = tempStr;
txtContents_prev = this.value ;
$("#spTextLine").text( (i-1).toString() );
break;
}
tempStr += curLineText + "\n";
}
ctrlVKeyCheck = false;
return;
}
checkTextArea(curLineText,curLineNumber);
});
$("#txtContents").focus();
$("#txtContents").trigger("keyup");
});
function checkTextArea(curLineText,curLineNumber) {
let curTextByte = 0;
for(let i = 0 ; i < curLineText.length ; i ++) {
const each_char = curLineText.charAt(i);
const uni_char = escape(each_char);
if(uni_char.length > 4 ) curTextByte += 2;
else curTextByte += 1;
}
//console.log($("#txtContents").val());
if(curTextByte > 80) {
alert("현재 입력 줄의 글자 Byte가 80byte를 초과 하였습니다. 다시 확인 하여 주시기 바랍니다.");
$("#txtContents").val(txtContents_prev);
return false;
} else if(curLineNumber > 38) {
alert("현재 입력 줄이 38줄을 초과 하였습니다. 다시 확인 하여 주시기 바랍니다.");
$("#txtContents").val(txtContents_prev);
return false;
} else {
$("#spTextLine").text( (curLineNumber-1).toString() );
$("#spTextByte").text( (curTextByte).toString() );
txtContents_prev = $("#txtContents").val();
return true;
}
}
</script>
'JQuery' 카테고리의 다른 글
| [JQuery-UI] tooltip 내용 줄 바꿈 하여 표시 진행 예제 (0) | 2024.06.02 |
|---|---|
| linq.js 를 이용하여 열거형에 데이터가 존재하는지 확인 간단 예제 (0) | 2015.12.17 |
| [JQGrid] 특정 Row editable:true 속성 값에 따라 수정 막아버리기;;; (0) | 2015.12.03 |
| [JQuery] JQGrid 셀 클릭시 달력 표시 간단한 예제 (0) | 2015.11.18 |
| [JQuery] JQGrid 특정컬럼 sortable:true로 정렬시 레코드가 없어지는 현상 임시 해결 (0) | 2015.10.15 |
