반응형
반응형

입력창 글자수 제한

<div class="form-group col-12" >
  <div class="textLengthWrap">
    <p class="textCount">0자</p>
    <p class="textTotal">/200자</p>
  </div>
  <textarea style="height:300px; resize: none;" maxlength="200" placeholder="텍스트를 입력하세요.">
  </textarea>	
</div>

$('#textBox').keyup(function (e) {
	let content = $(this).val();
    
    // 글자수 세기
    if (content.length == 0 || content == '') {
    	$('.textCount').text('0자');
    } else {
    	$('.textCount').text(content.length + '자');
    }
    
    // 글자수 제한
    if (content.length > 200) {
    	// 200자 부터는 타이핑 되지 않도록
        $(this).val($(this).val().substring(0, 200));
        // 200자 넘으면 알림창 뜨도록
        alert('글자수는 200자까지 입력 가능합니다.');
    };
});
반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[jQuery] URL에서 해시 값 가져오기  (0) 2023.07.04
7 JavaScript Web APIs to build Futuristic Websites you didn’t know  (0) 2023.07.04
jquery keyup, keydown, keypress 차이  (0) 2023.07.03
document.ready() vs window.load() 차이  (0) 2023.07.03
[jQuery] jQuery .each , $.trim li에서 텍스트 추출, 공백제거  (0) 2023.06.23
반응형

1. keyup

키보드에서 손을 땠을 때 실행

2. keydown

키보드를 눌렀을 때 실행

키보드를 누르고 있을 때 한번만 실행됨

3. keypress

키보드를 눌렀을 때 실행

키보드를 누르고 있을 때 계속 실행됨

 

* Ctrl, Alt, Shift 키 등은 keydown에서는 작동하지만 keypress 에서 작동하지 않음

 

* keyCode ASCII code 값

keydown, keyup에서는 a = 65, A = 65로 동일하게 보여짐

keypress에서는 a = 97, A = 65로 다른 값이 보여짐

 -> Caps Lock 여부 체크, 대소문자 구분을 통한 로직 작성 가능

 

* FireFox 에서의 버그

event.keyCode 가 파이어폭스에서 동작안할 수 있음 따라서 keyCode 사용 시 아래와 같이 사용하면 됨

 

var keyCode = event.keyCode ? event.keyCode : event.which;

 







keydown, keypress 는 이전 누른 값을 가지고 있음

keyup 은 한글 처리 가능 및 현재 누른 값을 가지고 있음

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

7 JavaScript Web APIs to build Futuristic Websites you didn’t know  (0) 2023.07.04
[script] 입력창 글자수 제한  (0) 2023.07.03
document.ready() vs window.load() 차이  (0) 2023.07.03
[jQuery] jQuery .each , $.trim li에서 텍스트 추출, 공백제거  (0) 2023.06.23
[jQuery] jQuery .data()  (0) 2023.05.30
반응형

1. $(document).ready()

- 외부 리소스. 이미지와는 상관 없이 브라우저가 DOM (document object model) 트리를 생성한 직후 실행
- window.load() 보다 더 빠르게 실행되고 중복 사용하여 실행해도 선언한 순서대로 실행됨
  

2. $(window).load()

- DOM의 standard 이벤트
- html의 로딩이 끝난 후에 시작
- 화면에 필요한 모든 요소(css, js, image, iframe etc..)들이 웹 브라우저 메모리에 모두 올려진 다음에 실행됨
- 화면이 모두 그려진 다음의 메세징이나 이미지가 관련 요소가 모두 올려진 다음의 애니메이션에 적합함
- 전체 페이지의 모든 외부 리소스와 이미지가 브러우저에 불려운 이후 작동하게 되어 이미지가 안뜨너가 딜레이가 생길 때에는 그만큼의 시간을 기다려야 함
- 외부 링크나 파일 인크루트시 그 안에 window.load 스크립트가 있으면 둘 중 하나만 적용됨
- body onload 이벤트와 같이 body에서 onload 이벤트를 쓰게 되면 모든 window.load() 가 실행되지 않는 현상이 발생함
 

* window > document
- document는 window의 자식 객체
  (window의 자식 객체 : document, self, navigator, screen, forms, history, location etc..)
- document : html의 요소들이나 속성들에 접근할 시 사용하는 객체

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(window).load(function() {
    console.log("console> window.onloade() 첫번째");
});
 
$(window).load(function() {
    console.log("console> window.onload() 두번째");
});
 
$(document).ready(function() {
    console.log("console> document.ready() 첫번째");
});
 
$(document).ready(function() {
    console.log("console> document.ready() 두번째");
});
</script>
 
</head>
<body>
 
</body>
</html>
반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

[script] 입력창 글자수 제한  (0) 2023.07.03
jquery keyup, keydown, keypress 차이  (0) 2023.07.03
[jQuery] jQuery .each , $.trim li에서 텍스트 추출, 공백제거  (0) 2023.06.23
[jQuery] jQuery .data()  (0) 2023.05.30
[javascript] 화면 리사이즈시 사이즈 확인 및 미디어쿼리 확인  (0) 2023.05.26
반응형

*  li에서 텍스트 추출, 공백제거


$(function(){
    var value1 = '      abc     ';
    var value2 = $(":text").val();
    //공백제거 전
    alert("value1 : " + value1+"\n"+"value2 : " + value2);
     
    value1 = $.trim(value1);
    value2 = $.trim(value2);
    //공백제거 후
    alert("value1 : " + value1+"\n"+"value2 : " + value2);
})

<!doctype html>
<html lang="ko">
 <head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html";charset="utf-8"/>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
	ul{list-style-type: none;}
  </style>
 </head>
 <body>

  <ul id="menu1">
	<li>철수1</li>
	<li>영희1</li>
	<li>길동1</li>
	<li>둘리1</li>
  </ul>

  <ul id="menu2">
	<li>철수2</li>
	<li>영희2</li>
	<li>길동2</li>
	<li>둘리2</li>
  </ul>
  

   <script>	
   $("#menu2 li").each(function( index, element ) {
     console.log($(this).text());
   });
  </script>

 </body>
</html>
반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

jquery keyup, keydown, keypress 차이  (0) 2023.07.03
document.ready() vs window.load() 차이  (0) 2023.07.03
[jQuery] jQuery .data()  (0) 2023.05.30
[javascript] 화면 리사이즈시 사이즈 확인 및 미디어쿼리 확인  (0) 2023.05.26
[javascript] 엔터키 입력 이벤트, KeyboardEvent keyCode  (0) 2023.05.26
반응형

https://api.jquery.com/data/

 

.data() | jQuery API Documentation

Description: Return arbitrary data associated with the first element in the jQuery collection, as set by data() or by an HTML5 data-* attribute. The .data() method allows us to read data previously associated with DOM elements. We can retrieve several dist

api.jquery.com

일치하는 요소와 연결된 임의의 데이터를 저장하거나 일치하는 요소 집합의 첫 번째 요소에 대한 명명된 데이터 저장소의 값을 반환합니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data demo</title>
  <style>
  div {
    color: blue;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
 
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span" ).first().text( $( "div" ).data( "test" ).first );
$( "span" ).last().text( $( "div" ).data( "test" ).last );
</script>
 
</body>
</html>

https://jsfiddle.net/mill01/moegwyp3/

 

jquery .data() - JSFiddle - Code Playground

 

jsfiddle.net

반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

document.ready() vs window.load() 차이  (0) 2023.07.03
[jQuery] jQuery .each , $.trim li에서 텍스트 추출, 공백제거  (0) 2023.06.23
[javascript] 화면 리사이즈시 사이즈 확인 및 미디어쿼리 확인  (0) 2023.05.26
[javascript] 엔터키 입력 이벤트, KeyboardEvent keyCode  (0) 2023.05.26
[VS Code] 인코딩 변경  (0) 2023.05.09
반응형

1. CheckBox 체크

$('#ckBox').prop('checked',true);
$('input:checkbox[name="네임"]').prop('checked',true);

첫 번째 라인과 같이 체크박스의 id를 지정해서 체크하여도 되고, 두 번째 라인과 같이 name, id 등을 선택하여 체크할 수 있다.

true로 설정하면 체크가 되고, false로 설정하면 체크가 해제 된다.

2. CheckBox 체크여부 확인

$('#ckBox').is(':checked');

.is(':checked') 를 이용하여 체크되어 있는지 아닌지를 알 수 있다.

(true : 체크되어 있음, false : 체크되어 있지 않음)

3. CheckBox 전체 체크

<div>전체<input type="checkbox" id="allCk"></div>
<div>테스트1<input id="ck1" type="checkbox"></input></div>
<div>테스트2<input id="ck2" type="checkbox"></input></div>
<div>테스트3<input id="ck3" type="checkbox"></input></div>

위와 같은 checkbox가 있을 때, 전체 체크하는 방법은 간단하다.

	$('#allCk').click(function(){
		var checked = $('#allCk').is(':checked');
		
		if(checked)
			$('input:checkbox').prop('checked',true);
	});

allCk 체크박스를 클릭 했을 때, allCk가 체크되어 있다면 checkbox를 전부 다 true로 해주면 된다.

 

 

테스트 소스

<!DOCTYPE html>
<html>
<head>
	<script src="./jquery-3.4.1.min.js"></script>
</head>

<div>전체<input type="checkbox" id="allCk"></div>
<div>테스트1<input id="ck1" type="checkbox"></input></div>
<div>테스트2<input id="ck2" type="checkbox"></input></div>
<div>테스트3<input id="ck3" type="checkbox"></input></div>

<button type="button" id="btn1">1번 체크/언체크</button>
<button type="button" id="btn2">2번 체크/언체크</button>
<button type="button" id="btn3">3번 체크/언체크</button>
<script>
	$('#btn1').click(function(){
		var checked = $('#ck1').is(':checked');
		$('#ck1').prop('checked',!checked);
	});
	
	$('#btn2').click(function(){
		var checked = $('#ck2').is(':checked');
		$('#ck2').prop('checked',!checked);
	});
	
	$('#btn3').click(function(){
		var checked = $('#ck3').is(':checked');
		$('#ck3').prop('checked',!checked);
	});
	
	$('#allCk').click(function(){
		var checked = $('#allCk').is(':checked');
		
		if(checked)
			$('input:checkbox').prop('checked',true);
	});
</script>
반응형
저작자표시 비영리

'프로그래밍 > Script' 카테고리의 다른 글

9 Projects You Can Do to Become a Front-End Master in 2023  (0) 2022.11.02
[javascript] GoJS, A Web Framework for Rapidly Building Interactive Diagrams  (0) 2022.11.01
Masonry - Cascading grid layout library  (0) 2022.10.12
How TO - Create a Draggable HTML Element  (0) 2022.10.06
“제 2의 노드JS 노린다” 오픈소스 런타임 환경 ‘번’이란?  (0) 2022.10.05

+ Recent posts

티스토리툴바