textarea中输入@时，弹出DIV

在 textarea 中输入 @ 时自动弹出 DIV 的实现

最新推荐文章于 2023-11-27 11:45:57 发布

原创最新推荐文章于 2023-11-27 11:45:57 发布 · 493 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #ViewUI

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在 IE 浏览器的 textarea 中，当用户输入 '@' 符号时，自动弹出一个包含提示信息的 DIV。通过 CSS 和 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>