<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
textarea,input {
outline:none;
resize: none;
overflow: auto;
font-family: inherit;
vertical-align: middle;
height: 40px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var inp = document.getElementById('inp');
var bt = document.getElementById('bt');
var txt = document.getElementById('txt');
bt.onclick = function(){
txt.value = inp.value;
inp.value = null;
}
txt.onmouseover = function(){
txt.value = inp.value;
inp.value = null;
}
inp.onmouseout = function(){
txt.value = inp.value;
inp.value = null;
}
}
</script>
</head>
<body>
<div class="wrap">
<h2>onclick</h2>
<input type="text" name="" id="input" value="" placeholder="輸入內容"/>
<button type="button" id="btn">確定</button>
<textarea id="txt1">
</textarea>
<h2>使用了鼠標的移入移出事件</h2>
<input type="text" name="" id="inp" value="" placeholder="輸入內容"/>
<button type="button" id="bt">確定</button>
<textarea id="txt">
</textarea>
</div>
<script type="text/javascript">
var input = document.getElementById('input');
var btn = document.getElementById('btn');
var txt1 = document.getElementById('txt1');
btn.onclick = function(){
txt1.value = input.value;
input.value = null;
}
</script>
</body>
</html>
js單擊事件和鼠標事件使用案例
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.