电力项目七--js控制文字内容过长的显示和文本字数的显示
当文本框中文字内容过长时,需要调整显示的样式
如上图所示的样式
对应的代码为:
<div id="showInfomation" style="visibility: hidden"></div>
<tr onmouseover="this.style.backgroundColor = 'white'" onmouseout="this.style.backgroundColor = '#F5FAFE';">
<td style="HEIGHT:22px" align="center" width="40%">
<div class="scrollStyle" align="left" onmouseover="showInfoWithPanel(this)" onmouseout="hiddenInfoPanel(this)" style="table-layout:fixed;">
<!-- 站点运行情况 -->
<s:property value="stationRun"/>
</div>
两个函数:
onmouseover="showInfoWithPanel(this)" 和 onmouseout="hiddenInfoPanel(this)"
对应的函数在前边引入的js中:
<link href="${pageContext.request.contextPath }/css/showText.css" type="text/css" rel="stylesheet">
<script language="javascript" src="${pageContext.request.contextPath }/script/showText.js"></script>
对应的js文件:
/*firefox*/function __firefox(){ HTMLElement.prototype.__defineGetter__("runtimeStyle", __element_style); window.constructor.prototype.__defineGetter__("event", __window_event); Event.prototype.__defineGetter__("srcElement", __event_srcElement);}function __element_style(){ return this.style;}function __window_event(){ return __window_event_constructor();}function __event_srcElement(){ return this.target;}function __window_event_constructor(){ if(document.all){ return window.event; } var _caller = __window_event_constructor.caller; while(_caller!=null){ var _argument = _caller.arguments[]; if(_argument){ var _temp = _argument.constructor; if(_temp.toString().indexOf("Event")!=-){ return _argument; } } _caller = _caller.caller; } return null;}if(window.addEventListener){ __firefox();}/*end firefox*/ function showInfoWithPanel(obj){
try{
//var e=event||window.event;
var showInfoWindow=document.getElementById("showInfomation");
showInfoWindow.className="clsShowInfoWindow";
showInfoWindow.style.visibility="visible";
var x=document.body.scrollLeft+event.clientX+;
var y=event.clientY+document.body.scrollTop+;//+document.documentElement.scrollTop;
showInfoWindow.style.left=x;
showInfoWindow.style.top=y;
showInfoWindow.innerHTML="";
showInfoWindow.innerHTML=obj.innerHTML;//+" clientY:"+y+" clientX:"+x;
obj.style.color="red";
}catch(e){alert("showInfoWithPanel:"+e.message);}
}
function hiddenInfoPanel(obj){
try{
var showInfoWindow=document.getElementById("showInfomation");
if(showInfoWindow || typeof(showInfoWindow)!='undefined'){
showInfoWindow.innerHTML="";
showInfoWindow.style.visibility="hidden";
}
obj.style.color="#000000";
}catch(e){alert("hiddenInfoPanel:"+e.message);}
}
首先获取到对应的变量,然后修改其显示的属性。
具体过程用google浏览器来调试,调试方法:如下图,在source中找到对应的js文件,断点进行调试
关于文本字数的显示
如图,文本下方显示文字的剩余个数
找到对应的代码:
<td class="ta_01" bgcolor="#ffffff" style="word-break: break-all">
<!-- 站点运行情况数据回显 -->
<s:textarea name="stationRun" id="stationRun" cssStyle="width: 500px; height: 160px; padding: 1;FONT-FAMILY: 宋体; FONT-SIZE: 9pt" onkeydown="if(event.keyCode==13)addEnter('stationRun');" />
</td>
event.keyCode按的建的代码,13表示回车,输入回车后,文本内容中添加<br>
<script></script>中,window.onload是一个事件,当文档加载完成之后就会触发该事件
window.onload=function(){
checkTextAreaLen();
}
对应的checkTextAreaLen()函数
function checkTextAreaLen(){
var stationRun = new Bs_LimitedTextarea('stationRun', );
stationRun.infolineCssStyle = "font-family:arial; font-size:11px; color:gray;";
stationRun.draw(); var devRun = new Bs_LimitedTextarea('devRun', );
devRun.infolineCssStyle = "font-family:arial; font-size:11px; color:gray;";
devRun.draw();
}
同时,对应的 Bs_LimitedTextarea()在 <script language="javascript" src="${pageContext.request.contextPath }/script/limitedTextarea.js"></script>的js中
function Bs_LimitedTextarea(elementId, maxLength) {
var a = arguments;
var arrayIndex=;
if (a.length==) {
elementId = a[];
maxLength = a[];
arrayIndex = ;
}
if (a.length==) {
elementId = a[];
maxLength = a[];
arrayIndex = a[];
}
......还有很多
这个js太复杂,用到的时候再看吧 ... ... 以上内容就是这两个js效果的描述
电力项目七--js控制文字内容过长的显示和文本字数的显示的更多相关文章
- JS控制文字只显示两行,超出部分显示省略号
由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...
- JS控制页面内容
JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...
- 电力项目十三--js添加浮动框
修改page/menu/loading.jsp页面 首先,页面中引入浮动窗样式css <!-- 浮动窗口样式css begin --> <style type="text/ ...
- 电力项目十一--js添加浮动框
1.添加浮动窗口样式 <!-- 浮动窗口样式css begin --> <style type="text/css"> #msg_win{border:1p ...
- jquery控制文字内容溢出用点点点(…)省略号表示
jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(“.text”).each(function(){ var maxwidth=23; if($(this).text( ...
- JS控制文字一个一个出现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js控制href内容的连接内容的变化
html: <a data-toggle="modal" href="#myModal_devices" id="check_devices&q ...
- echarts的axisLabel的文字内容过长的解决办法
通过查找资料学习,我总结了四种解决的办法,不一定是最好的,但是希望能够帮助到需要的童鞋,同时如果大家有什么更好的方法欢迎指导. 方法一:这种方法就是将文本内容转换为字符串数组,然后再按需求换行,需要每 ...
- ExtJs Column 显示文字内容过长 使用Tootip显示全部内容
{ text: 'Column Header Blah', dataIndex: 'blah', renderer: function(value, metaData, record, rowIdx, ...
随机推荐
- HDU - 3836 Equivalent Sets (强连通分量+DAG)
题目大意:给出N个点,M条边.要求你加入最少的边,使得这个图变成强连通分量 解题思路:先找出全部的强连通分量和桥,将强连通分量缩点.桥作为连线,就形成了DAG了 这题被坑了.用了G++交的,结果一直R ...
- atoi 和 itoa
转自:http://www.cnblogs.com/cobbliu/archive/2012/08/25/2656176.html atoi 和 itoa是面试笔试经常要考到的题目,下面两份代码是用C ...
- vim如何选择ESC的键位绑定
vim除了hijk之外,按键频率最高的大概是Esc,本人已经有点Esc强迫症的兆头了.默认的Esc键远在边陲,按起来也忒麻烦了.怎么解决? 在google大神的帮助下,找到了两个方案: CapsLoc ...
- ubuntu下修改读写权限
把home下所有文件所有者改成输入目标 $ chown - R [your name].users /home/
- [svc]linux buffer和cache的区别
通俗理解buffer,cache Cache:缓存区,是高速缓存,是位于CPU和主内存之间的容量较小但速度很快的存储器,因为CPU的速度远远高于主内存的速度,CPU从内存中读取数据需等待很长的时间,而 ...
- ENGINE_API CXNoTouch
/************************************************************************/ //屏蔽消息面板 //优先级默认为 TP_BOTT ...
- ng-class中的if else判断
ng-class中的if else判断 来自于stackoverflow的一个问题,自己刚好用到,搬过来做个标记.原问题链接 在使用ng-class时,有些时候会碰到根据是否满足条件来设置元素的样式, ...
- layui单文件上传
function imguload(cls) { var taskId = $("#model-taskId").val(); var processInstanceId = $( ...
- C++static关键字用法
一.static的作用有三种:限制变量或函数作用域.保持变量内容的持久.默认初始化为0 1.被static关键字修饰的全局函数或者变量具有文件作用域,即只在当前文件中可见. 2.被static修饰的变 ...
- Makefile 9——为依赖关系文件建立依赖关系
现在我们再对complicated项目做一些更改,增加程序文件间依赖关系的复杂度. /× main.c ×/ #include"foo.h" int main(void) { fo ...