结合jquery，使得textarea自适应高度，并且提示层跟随光标移动
2015-05-19 19:21
363 查看
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>邮件</title>
<script type="text/javascript" src="${rc.getContextPath()}/xheditor/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${rc.getContextPath()}/xheditor/xheditor-1.1.14-zh-cn.js"></script>
<style>
.resizable_off{
resize:none;
}
.width_100{
width:98%;
-height:25px;
font-size:18px;
}
.height_30{
height:30px;
}
.email{
font-size:14px;
color:#BDBDBD;
}
.td_left_text{
width:80px;
height:30px;
}
.editor{
height:550px;
}
.vtop{
vertical-align: top;
}
.btn{
padding:5px;
border-radius: 5px;
text-decoration: none;
}
.btn_blue{
border: 1px solid #1E26BE;
background-color: #2400FF;
color: #fff;
}
.btn_green{
border: 1px solid #1AFF00;
background-color: #1AFF00;
color: #000;
}
.btn_blue_border{
border: 1px solid;
}
.btn_red{
background-color: #F00;
border: 1px solid #f00;
color: #fff;
}
.toolbar{
position: fixed;
height: 30px;
padding: 10px;
line-height:30px;
background-color: #fff;
width: 100%;
margin: -8px;
}
.top{
padding-top:40px;
}
.right{
position: fixed;
right: 15px;
line-height: 15px;
}
.linker_div{
position: fixed;
right: 0px;
top: 50px;
border: 1px solid #D7CACA;
height: 460px;
background-color: #F2F2F2;
}
.search_img{
padding: 5px 5px 5px 0px;
vertical-align: middle;
}
.search_img:hover{
cursor:pointer;
}
.tip_div{
position:absolute;
height: 200px;
overflow:auto;
border: 1px solid #D7CACA;
background-color: #F2F2F2;
width:350px;
}
.tip_div ul{
list-style: none;
padding: 0 5px;
margin: 0;
}
.tip_div ul li{
list-style: none;
line-height: 25px;
border-bottom: 1px solid #fff;
}
.tip_div li a{
text-decoration: none;
}
</style>
</head>
<body>
<div class="toolbar">
<a href="javascript:void(0)" class="btn btn_blue" >发送</a>
<a href="javascript:void(0)" class="btn btn_green" >保存</a>
<a href="javascript:void(0)" class="btn btn_red" >删除</a>
<a href="javascript:void(0)" class="btn btn_blue_border right" onclick="showLinker()" id="linkerBtn">联系人</a>
</div>
<div id="linkerDiv" class="linker_div" style="display:none">
<div>
<input name="key" id="key" placeholder="请输入关键字" class="search_input"></input>
<img src="${rc.getContextPath()}/js/jquery/easyui/themes/icons/search.png" class="search_img">
</div>
</div>
<div id="tipDiv" class="tip_div" style="display:none">
<ul>
<li><a href="javascript:void(0)" title="xxx">提示</a></li>
<li><a href="javascript:void(0)" >提示</a></li>
<li><a href="javascript:void(0)" >提示</a></li>
<li><a href="javascript:void(0)" >提示</a></li>
<li><a href="javascript:void(0)" >提示</a></li>
<li><a href="javascript:void(0)" >提示</a></li>
</ul>
</div>
<div class="top">
<div id="test"></div>
<table width="100%">
<tr>
<td class="td_left_text">发件人</td>
<td>${user.userName!''}<span class="email"><${user.email!''}></span></td>
</tr>
<tr>
<td class="td_left_text">收件人</td>
<td><textarea name="receiver" id="receiver" class="resizable_off width_100" rows=1></textarea></td>
</tr>
<tr>
<td class="td_left_text">抄送</td>
<td><textarea name="carbonCopy" id="carbonCopy" class="resizable_off width_100" rows=1></textarea></td>
</tr>
<tr>
<td class="td_left_text">主题</td>
<td><textarea name="subject" id="subject" class="resizable_off width_100" rows=1></textarea></td>
</tr>
<tr>
<td class="td_left_text">附件</td>
<td>
<div id="attachment_list"><div>
<img src="${rc.getContextPath()}/js/jquery/easyui/themes/icons/edit_add.png">
<input type="hidden" name="attachment" id="attachment"></input>
</td>
</tr>
<tr>
<td class="td_left_text vtop">内容</td>
<td><textarea name="content" id="content" class="width_100 editor"></textarea></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
$(function(){
//初始化富文本编辑器
$('#content').xheditor({
tools:'Cut,Copy,Paste,Pastetext,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,SelectAll,Removeformat,Align,List,Outdent,Indent,Link,Unlink,Anchor,Img,Hr,Table,Source,Preview,Fullscreen,About',
upBtnText:"选择",
upImgUrl:'!{editorRoot}xheditor_plugins/multiupload/multiupload.html?uploadurl=${rc.getContextPath()}/file/upload.jhtml?immediate=0&ext=图片文件(*.jpg;*.jpeg;*.gif;*.png)&count=10&size=5 MB',
localUrlTest:/^http?:\/\/[^\/]*?(127\.0\.0\.1)\//i,
remoteImgSaveUrl:'${rc.getContextPath()}/file/uploadPasteImg.jhtml'
});
//textarea自适应高度
$('textarea.resizable_off').bind("keyup focus click",function(){
var rows = Math.round(this.scrollHeight/21);
this.rows=rows;
var index;
if(document.selection){
index = document.selection.createRange();
}else{
index = this.selectionStart;
}
var fontSize=$(this).css("font-size").replace(/[^0-9]/ig,"");
var h=$(this).css("height").replace(/[^0-9]/ig,"");
var top=$(this).position().top+parseInt(h)+5;
if(rows>1){
index = Math.round(index-(rows-1)*($(this).width()/fontSize));
}
var left=$(this).position().left+fontSize*index;
if((left+$('#tipDiv').width())>$(window).width()){
left=$(window).width()-$('#tipDiv').width()-5;
}
$('#tipDiv').css({"top":top,"left":left});
$('#tipDiv').show();
});
$('textarea.resizable_off').bind("blur",function(){
$('#tipDiv').hide();
});
});
function showLinker(){
$('#linkerBtn').html("关闭联系人");
$('#linkerBtn').attr("onclick","closeLinker()");
$('#linkerDiv').slideDown(200);
}
function closeLinker(){
$('#linkerBtn').html("联系人");
$('#linkerBtn').attr("onclick","showLinker()");
$('#linkerDiv').slideUp(200);
}
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>邮件</title>
<script type="text/javascript" src="${rc.getContextPath()}/xheditor/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="${rc.getContextPath()}/xheditor/xheditor-1.1.14-zh-cn.js"></script>
<style>
.resizable_off{
resize:none;
}
.width_100{
width:98%;
-height:25px;
font-size:18px;
}
.height_30{
height:30px;
}
.email{
font-size:14px;
color:#BDBDBD;
}
.td_left_text{
width:80px;
height:30px;
}
.editor{
height:550px;
}
.vtop{
vertical-align: top;
}
.btn{
padding:5px;
border-radius: 5px;
text-decoration: none;
}
.btn_blue{
border: 1px solid #1E26BE;
background-color: #2400FF;
color: #fff;
}
.btn_green{
border: 1px solid #1AFF00;
background-color: #1AFF00;
color: #000;
}
.btn_blue_border{
border: 1px solid;
}
.btn_red{
background-color: #F00;
border: 1px solid #f00;
color: #fff;
}
.toolbar{
position: fixed;
height: 30px;
padding: 10px;
line-height:30px;
background-color: #fff;
width: 100%;
margin: -8px;
}
.top{
padding-top:40px;
}
.right{
position: fixed;
right: 15px;
line-height: 15px;
}
.linker_div{
position: fixed;
right: 0px;
top: 50px;
border: 1px solid #D7CACA;
height: 460px;
background-color: #F2F2F2;
}
.search_img{
padding: 5px 5px 5px 0px;
vertical-align: middle;
}
.search_img:hover{
cursor:pointer;
}
.tip_div{
position:absolute;
height: 200px;
overflow:auto;
border: 1px solid #D7CACA;
background-color: #F2F2F2;
width:350px;
}
.tip_div ul{
list-style: none;
padding: 0 5px;
margin: 0;
}
.tip_div ul li{
list-style: none;
line-height: 25px;
border-bottom: 1px solid #fff;
}
.tip_div li a{
text-decoration: none;
}
</style>
</head>
<body>
<div class="toolbar">
<a href="javascript:void(0)" class="btn btn_blue" >发送</a>
<a href="javascript:void(0)" class="btn btn_green" >保存</a>
<a href="javascript:void(0)" class="btn btn_red" >删除</a>
<a href="javascript:void(0)" class="btn btn_blue_border right" onclick="showLinker()" id="linkerBtn">联系人</a>
</div>
<div id="linkerDiv" class="linker_div" style="display:none">
<div>
<input name="key" id="key" placeholder="请输入关键字" class="search_input"></input>
<img src="${rc.getContextPath()}/js/jquery/easyui/themes/icons/search.png" class="search_img">
</div>
</div>
<div id="tipDiv" class="tip_div" style="display:none">
<ul>
<li><a href="javascript:void(0)" title="xxx">提示</a></li>
<li><a href="javascript:void(0)" >提示</a></li>
<li><a href="javascript:void(0)" >提示</a></li>
<li><a href="javascript:void(0)" >提示</a></li>
<li><a href="javascript:void(0)" >提示</a></li>
<li><a href="javascript:void(0)" >提示</a></li>
</ul>
</div>
<div class="top">
<div id="test"></div>
<table width="100%">
<tr>
<td class="td_left_text">发件人</td>
<td>${user.userName!''}<span class="email"><${user.email!''}></span></td>
</tr>
<tr>
<td class="td_left_text">收件人</td>
<td><textarea name="receiver" id="receiver" class="resizable_off width_100" rows=1></textarea></td>
</tr>
<tr>
<td class="td_left_text">抄送</td>
<td><textarea name="carbonCopy" id="carbonCopy" class="resizable_off width_100" rows=1></textarea></td>
</tr>
<tr>
<td class="td_left_text">主题</td>
<td><textarea name="subject" id="subject" class="resizable_off width_100" rows=1></textarea></td>
</tr>
<tr>
<td class="td_left_text">附件</td>
<td>
<div id="attachment_list"><div>
<img src="${rc.getContextPath()}/js/jquery/easyui/themes/icons/edit_add.png">
<input type="hidden" name="attachment" id="attachment"></input>
</td>
</tr>
<tr>
<td class="td_left_text vtop">内容</td>
<td><textarea name="content" id="content" class="width_100 editor"></textarea></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
$(function(){
//初始化富文本编辑器
$('#content').xheditor({
tools:'Cut,Copy,Paste,Pastetext,Blocktag,Fontface,FontSize,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,SelectAll,Removeformat,Align,List,Outdent,Indent,Link,Unlink,Anchor,Img,Hr,Table,Source,Preview,Fullscreen,About',
upBtnText:"选择",
upImgUrl:'!{editorRoot}xheditor_plugins/multiupload/multiupload.html?uploadurl=${rc.getContextPath()}/file/upload.jhtml?immediate=0&ext=图片文件(*.jpg;*.jpeg;*.gif;*.png)&count=10&size=5 MB',
localUrlTest:/^http?:\/\/[^\/]*?(127\.0\.0\.1)\//i,
remoteImgSaveUrl:'${rc.getContextPath()}/file/uploadPasteImg.jhtml'
});
//textarea自适应高度
$('textarea.resizable_off').bind("keyup focus click",function(){
var rows = Math.round(this.scrollHeight/21);
this.rows=rows;
var index;
if(document.selection){
index = document.selection.createRange();
}else{
index = this.selectionStart;
}
var fontSize=$(this).css("font-size").replace(/[^0-9]/ig,"");
var h=$(this).css("height").replace(/[^0-9]/ig,"");
var top=$(this).position().top+parseInt(h)+5;
if(rows>1){
index = Math.round(index-(rows-1)*($(this).width()/fontSize));
}
var left=$(this).position().left+fontSize*index;
if((left+$('#tipDiv').width())>$(window).width()){
left=$(window).width()-$('#tipDiv').width()-5;
}
$('#tipDiv').css({"top":top,"left":left});
$('#tipDiv').show();
});
$('textarea.resizable_off').bind("blur",function(){
$('#tipDiv').hide();
});
});
function showLinker(){
$('#linkerBtn').html("关闭联系人");
$('#linkerBtn').attr("onclick","closeLinker()");
$('#linkerDiv').slideDown(200);
}
function closeLinker(){
$('#linkerBtn').html("联系人");
$('#linkerBtn').attr("onclick","showLinker()");
$('#linkerDiv').slideUp(200);
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery实现textarea根据文本内容自适应高度
- jquery实现textarea 高度自适应
- jquery实现的提示浮层跟随鼠标移动
- jquery 鼠标停留显示提示框，提示框位置跟随鼠标移动
- jquery实现文本框textarea自适应高度
- jquery实现：提示文本/图片跟随鼠标移动
- jquery实现textarea高度自适应
- jquery文本框textarea自适应高度
- jquery/js实现文本框根据输入内容input,textarea自适应高度
- jquery实现textarea 高度自适应
- Jquery实现textarea根据文本内容自适应高度
- jquery实现textarea 高度自适应 转自http://www.jb51.net/article/61997.htm
- Jquery插件----TextArea高度自适应
- jQuery实现textarea高度根据内容自适应
- jquery实现的提示浮层跟随鼠标移动
- jQuery实现<textarea>高度自适应,适用于td中的textarea
- jquery 鼠标停留显示提示框，提示框位置跟随鼠标移动
- textVIew 在输入时 设置行数并且自适应高度 上移动
- 提示浮层跟随鼠标移动(js版和jquery版)
- jquery实现文本框textarea自适应高度