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>