`

textarea中输入@时，弹出DIV

JavaScript 
阅读更多

textarea中输入@时，弹出DIV （IE浏览器）

 

 

<html>  
     <head>  
         <title>IE Range</title>  
         <style type="text/css">  
             #textarea { border: 1px solid #AAA; width: 100px; height: 50px; overflow: auto; }  
             #tips { display: none; position: absolute; border: 1px solid #AAA; background: #FFF; width: 80px; height: 100px; z-index: 100; }  
         </style>  
     </head>  

     <body>  
         <textarea id="textarea"></textarea>  
         <div id="tips"></div>  
         <script type="text/javascript">  
 ( function( window, undefined ) {  
	 var  
	 textarea = document.getElementById( "textarea" ),  
	 tips = document.getElementById( "tips" );  

	 textarea.onkeypress = function( e ) {  
		 e = e || event;  
		 switch ( e.keyCode ) {  
		// /* event.keyCode === "@" */  
		 case 64:  
			
			 var selection = document.selection,  
				 range = selection.createRange();  
			 tips.style.display = "block";  
			 tips.style.left = range.offsetLeft + "px";  
			 tips.style.top = range.offsetTop + range.boundingHeight + "px";  
			 break;  
		 default:  
			 tips.style.display = "none";  
		 }  
	 };  

 } )( window );  
         </script>  
     </body>  
 </html>
 
分享到：
| 遍历object方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics