电力项目七--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, ...
随机推荐
- Sublime Text 使用指南 - 前端开发神器
Sublime Text 前端开发的神器 Sublime Text是一个前端开发者必备的编辑器,大量的插件,完善的功能,优越的性能,有非常多的特色,给前端开发提供了一个完善的开发条件. 本文主要介绍的 ...
- vim如何选择ESC的键位绑定
vim除了hijk之外,按键频率最高的大概是Esc,本人已经有点Esc强迫症的兆头了.默认的Esc键远在边陲,按起来也忒麻烦了.怎么解决? 在google大神的帮助下,找到了两个方案: CapsLoc ...
- Rigidbody-ClosestPointOnBounds测试
可见是Collider的Bounds
- I2C总线协议
1.I2C协议 2条双向串行线,一条数据线SDA,一条时钟线SCL. SDA传输数据是大端传输,每次传输8bit,即一字节. 支持多主控(multimastering),任何时间点只能有 ...
- [elk]elasticsearch dashboard+保留10天内索引+导入导出备份
es dashboard 有两款 head 这款我一直在用 https://github.com/mobz/elasticsearch-head 先修改es的配置文件: elasticsearch.y ...
- java 高精度 四则运算
java的大数处理对于ACM中的大数来说,相当的简单啊: 整数的运算 BigInteger 小数的运算 BigDecimal 导入类: import java.util.Scanner; im ...
- 运用 Range 对象处理 Word 文档内容
运用 Range 对象处理 Word 文档内容 在所有 Office 应用程序中,Microsoft Word 可能是应用最广泛的应用程序,它还经常在自定义 Office 解决方案中扮演重要的角色 ...
- am335x gpio 控制的另一种方法
#include <linux/gpio.h> #include <linux/module.h> #include <linux/kernel.h> #in ...
- oozie中时间EL表达式
EL表达式: 常量表示形式 含义说明 ${coord:minutes(int n)} 返回日期时间:从一开始,周期执行n分钟 ${coord:hours(int n)} 返回日期时间:从一开始,周期执 ...
- Maple重点知识总结
Maple中的evalf与evalhf evalf 可作用于单值 可作用于List 可作用于Set 可作用于Vector(<..>) 可作用于Matrix(<..|..|..> ...