onkeyup, onkeydown, onkeypress, onmouseover

웹페이지를 구현 할 때 유용한 JSP 코드를 정리합니다!

 

 

onkeyup : 키보드 키를 누르고나서 띄웠을 때 반응 (한자키, 한영변환 안 함)
onkeydown : 키보드 키를 누를 때 반응  (한자키,한영변환 안 함)
onkeypress : 키보드 키를 누를 때 반응  (특수키는 반응 안 함, EX)f5 사용금지, f12 못쓰게 막을 때) 

 

<input type="text" placeholder="aaa" id="aaa" onkeyup="abc()" onmouseover="bbb()">
<br><br><br>
<input type="text" placeholder="bbb" id="bbb" onkeyup="plus()" list="op"> <br>

<datalist id="op"> <!-- datalist=>onchange 아님주의 사용하긴 하지만 onkeyup,down 이런 걸로씀
 -->
<option>01</option>
<option>02</option>
<option>03</option>

</datalist>

<input type="text" id="ccc" onkeyup="plus()"> <br>
<input type="text" id="code" readonly >

<br><br>
<form name="f" id="f" method="post">
<br><br>
<textarea id="contents" name="contents"></textarea>
<!-- 안에 공간있으면 절 때 안 됨! -->
</form>
<input type="button" value="전송" onclick="ck()">


</body>
<script>
CKEDITOR.replace("contents"); //editor api 적용

function ck() {
	//ckeditor는 별도 instances를 가져와서 값을 검토 해야함 
	//var ct = document.getElementById("contents").value; //검토 안됨 
	var ct = CKEDITOR.instances.contents.getData(); //검토 됨
	if(ct==""){
		alert("내용을 입력해주세요"); //값을 넣어도 안넎어도 이게뜸
	}
	else{
		f.submit();
	}
}

function abc() {
	var a = document.getElementById("aaa").value;
	console.log(a);
}

function bbb() { //더블핸들링 
	alert("test");
}
function plus() {
	var aa= document.getElementById("bbb").value;
	var bb= document.getElementById("ccc").value;
	var z = aa+ bb;
	document.getElementById("code").value=z;
}


</script>