Day8---------messageGet
oEvent.cancelBubble=true;------------取消事件冒泡
ctrlKey.shiftKey,altKey
//-----------获取用户的回车键码来完成内容的输入
//-----尚未完成-------发现Google，FF，IE的oTextarea.style.background返回值均不一样，时间问题就没有做兼容性.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>messageGet</title> 6 </head> 7 <style type="text/css"> 8 div{margin: 20px auto;height: 200px;width: 300px;background: #CCC;} 9 textarea{resize:none;} 10 input{width: 295px;} 11 </style> 12 <script type="text/javascript"> 13 window.onload=function(){ 14 var aTips=["Username:","Password:","Sex:","Phonenumber:","VerificationCode:"]; 15 var aVerify=["fuck","bcsm","pfxa","skte","uudv","vtsk"]; 16 var count=1; 17 oTextarea=document.getElementsByTagName('textarea')[0]; 18 var randomPic=Math.floor(Math.random()*6); 19 oInput=document.getElementsByTagName('input')[0]; 20 oTextarea.value+=aTips[0]; 21 oBox=document.getElementById('box'); 22 oInput.onkeydown=function(ev){ 23 oEvent=ev||event; 24 if(oEvent.keyCode==13){ 25 oTextarea.value+=(oInput.value+'\n'); 26 oTextarea.value+=aTips[count]; 27 if(count==4){ 28 oInput.onkeydown=null; 29 oTextarea.style.backgroundImage="url('pic/"+aVerify[randomPic]+".png')"; 30 oTextarea.style.backgroundRepeat="no-repeat"; 31 oTextarea.style.backgroundPosition="0% 100%"; 32 oInput.onkeydown=function(ev){ 33 oEvent=ev||event; 34 if(oEvent.keyCode==13){ 35 if(oInput.value==oTextarea.style.background.slice(-27,-23)){ 36 oTextarea.value+=oInput.value; 37 oMessageBox=document.createElement('textarea'); 38 oMessageBox.value="Here is your message."+"\n"; 39 oMessageBox.value+=oTextarea.value; 40 oMessageBox.disabled="disabled"; 41 oMessageBox.style.resize="none"; 42 oMessageBox.cols=39; 43 oMessageBox.rows=13; 44 oBox.insertBefore(oMessageBox,oTextarea); 45 oBox.removeChild(oTextarea); 46 oBox.removeChild(oInput); 47 } 48 else alert('VerificationCode Wrong.'); 49 } 50 } 51 } 52 oInput.value=""; 53 ++count; 54 } 55 } 56 } 57 </script> 58 <body> 59 <div id="box"> 60 <textarea cols="39" rows="11" resize="none" disabled="disabled"></textarea> 61 <input type="text" placeholder="Input your message."/> 62 </div> 63 </body> 64 </html>
