<div class="wrap">
<div class="menu">메뉴-1</div>
<div class="menu">메뉴-2</div>
<div class="menu">메뉴-3</div>
<div class="menu">메뉴-4</div>
<div class="menu">메뉴-5</div>
</div>
---------------------------------------------------
let i, menu, no=0;
const menuA=["회사","쇼핑", "뉴스", "부동산", "웹툰" ];
window.xxxxonload=function() {
/* // 개별 Class 클릭 안됨
menu=document.querySelector(".wrap").getElementsByClassName("menu");
menu[0].addEventListener("click", function() {
for(k=0; k<5; k++)
menu[k].style.color="black";
menu[0].style.color="red";
})
*/
/* // for 반복문으로 addEventListener 가능
menu=document.querySelector(".wrap").getElementsByClassName("menu");
for(i=0; i<5; i++) {
menu[i].addEventListener("click", function() {
for(k=0; k<5; k++)
menu[k].style.background="white";
this.style.background="orange";
})
}
*/
/* // querySelectorAll로 읽어서 for 문으로 처리 가능
menu=document.querySelectorAll(".menu");
for(i=0; i<5; i++) {
menu[i].style.fontSize="20px";
}
*/
/*
// querySelectorAll로 읽어서 forEach 문으로 처리 가능
menu=document.querySelectorAll(".menu"); // 5개의 메뉴 읽기
menu.forEach((m)=> { // 변수 m이 메뉴 5개 각각 처리 가능
m.style.fontSize="20px";
m.style.color="blue";
})
*/
/*
// All로 읽어서 forEach로 배열에 있는 메뉴글자 읽어들이기 가능
menu=document.querySelectorAll(".menu");
menu.forEach( (m)=>{
// m.innerHTML="데이터";
m.innerHTML=menuA[no];
no++;
});
*/
/*
// All로 읽어서 forEach로 배열에 있는 글자 넣을 때 for 쓰면 안됨
menu=document.querySelectorAll(".menu");
menu.forEach( (m)=> {
for(i=0; i<5; i++) // for를 쓰면 m에 '회사', '쇼핑', '뉴스'... '웹툰'
m.innerHTML=menuA[i]; // 마지막 '웹툰'만 들어가게 되어 안됨
})
*/
}
===========================================
const posA = [0, 1000, 2000, 3000, 4000];
box = document.querySelectorAll('.box');
box.forEach((b) => {
b.innerHTML = "데이터";
for (i = 0; i < posA.length; i++)
b.innerHTML = posA[i];
})
}
===================================
키보드
/* [html 최초 로드 및 이벤트 상시 대기 실시] */
window.xxxxonload = function() {
console.log("");
console.log("[window xxxxonload] : [start]");
console.log("");
/*
[요약 설명]
1. 모바일 웹뷰 가상 키보드에서 엔터 및 이동 키 입력 시 반환 되는 KeyCode 값은 [13] 입니다
1. 이동 및 엔터 키를 눌렀을 경우 로그인 처리 등 추가 로직을 수행할 수 있습니다
*/
// [특정 input text keydown 입력 이벤트 감지 : id 지정]
var minor_box = document.getElementById("minor_box");
minor_box.xxxxonkeydown = function(event) {
console.log("");
console.log("[window xxxxonload] : [minor_box] : [xxxxonkeydown]");
console.log("[keyCode] : " + event.keyCode);
console.log("");
// [팝업창 알림 표시]
alert("[keyCode] : " + event.keyCode);
};
};
[출처] 184. (javascript/자바스크립트) xxxxonkeydown 사용해 모바일 웹뷰 가상 키보드 엔터 (enter) 키 입력 이벤트 감지|작성자 투케이2K
$(document).ready(function() {
$("#password").keydown(function(key) {
if (key.keyCode == 13) { // 13은 엔터키
loginAct();
}
});
});
[출처] 키보드 엔터 이벤트|작성자 tworainfive
======================================
<script>
var input = document.getElementById("myInput");
input.addEventListener("keyup", function (event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myBtn").click();
}
});
</script>
출처: https://sisiblog.tistory.com/237 [달삼쓰뱉:티스토리]
====================================
텍스트 입력박스에 엔터키를 쳤을때 처리하는 경우가 빈번하게 발생하는 데요, 그럴때마다 이벤트 키코드값을 13으로 비교해서 일일이 처리하는 코드를 작성하는것이 귀찮을때 사용하는 함수를 하나 만들어 봤습니다.
사용방법은 다음과 같이 간단합니다.
$(document).ready(function(){
setKeyEnterEvent(document.frmSearch.inputObj,function(){
go_search(); //처리내용
});
});
함수정의는 다음과 같습니다.
function setKeyEnterEvent(obj,procFunc){
$(obj).keydown(function(e){
if(e.keyCode==13){
if(procFunc){
procFunc();
return false;
}
}
});
}
[출처] [lib] 입력박스 엔터키 이벤트 처리 함수|작성자 프쟁이