当文本框中文字内容过长时,需要调整显示的样式

如上图所示的样式

对应的代码为:

<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控制文字内容过长的显示和文本字数的显示的更多相关文章

  1. JS控制文字只显示两行,超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  2. JS控制页面内容

    JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...

  3. 电力项目十三--js添加浮动框

    修改page/menu/loading.jsp页面 首先,页面中引入浮动窗样式css <!-- 浮动窗口样式css begin --> <style type="text/ ...

  4. 电力项目十一--js添加浮动框

    1.添加浮动窗口样式 <!-- 浮动窗口样式css begin --> <style type="text/css"> #msg_win{border:1p ...

  5. jquery控制文字内容溢出用点点点(…)省略号表示

    jQuery限制字符字数的方法 $(function(){ //限制字符个数 $(“.text”).each(function(){ var maxwidth=23; if($(this).text( ...

  6. JS控制文字一个一个出现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js控制href内容的连接内容的变化

    html: <a data-toggle="modal" href="#myModal_devices" id="check_devices&q ...

  8. echarts的axisLabel的文字内容过长的解决办法

    通过查找资料学习,我总结了四种解决的办法,不一定是最好的,但是希望能够帮助到需要的童鞋,同时如果大家有什么更好的方法欢迎指导. 方法一:这种方法就是将文本内容转换为字符串数组,然后再按需求换行,需要每 ...

  9. ExtJs Column 显示文字内容过长 使用Tootip显示全部内容

    { text: 'Column Header Blah', dataIndex: 'blah', renderer: function(value, metaData, record, rowIdx, ...

随机推荐

  1. 8086汇编之 CALL 和 RET指令

    Ret 和 call 也是转移指令,可是他们跟jmp不同的是,这两个转移指令都跟栈有关系. <1> ret 用栈中的数据改动IP的地址,从而实现近转移 ( ip ) = ( (ss)*16 ...

  2. Ubuntu下如何检查文件的md5,sha-512码

    ubuntu自带程序md5sum,sha512sum md5sum filename sha512sum filename 即可.

  3. Atitit.软件GUI按钮与仪表盘(01)--js区-----js格式化的使用

    Atitit.软件GUI按钮与仪表盘(01)--js区-----js格式化的使用 1. Chrome36( recomm) DEV TOOL>SOURCE> DSWEIHAMYAR  &q ...

  4. atitit.软件开发--socket框架选型--netty vs mina j

    atitit.软件开发--socket框架选型--netty vs mina j . Netty是由JBOSS提供的一个java开源框架 Apache mina 三.文档比较 mina文档多,,, 好 ...

  5. navicat 手动设置索引unique,报错duplicate entry "" for key ""

    错误场景:仅限于手动设置unique时.在navicat中根据流程:右键表名 -> 设计表 -> 索引 -> 设置某列为unique -> 保存错误图示: 错误原因:这句错误提 ...

  6. 02、Universal app 中按钮图标使用

    前言,windows10 昨天凌晨发布了,windows store 开发模型比以前的 silverlight 模型由很多优势, 我也小兴奋了一把. 正文: 在 windows phone 8.0 以 ...

  7. Java GC 日志解析

    JVM 在Java应用程序优化中是不可缺少的一大重项,如何合理配置Java参数,如果验证配置参数的有效性,从GC日志中可以获得很重要的提示,以下是笔者对GC垃圾收集器默认开启的组合日志的部分的解析,希 ...

  8. su和sudo命令

    su命令用于在不同的用户之间切换,比如使用user1登陆了系统,但要执行一些管理操作,比如useradd,普通用户没有这个权限的,解决的办法有两个. 1:退出user1用户,重新以root用户登录系统 ...

  9. man page用法

    通过man man可查看man page的具体用法. 1   Executable programs or shell commands       2   System calls (functio ...

  10. Linux系统查看公网IP地址

    curl members.3322.org/dyndns/getip