利用js打造的一个非常实用简易的文本编辑框,可以显示行号并且同时兼容ie和firefox等主流浏览器,如下效果图:
以下是该效果的源码:
001 | < html > |
002 | < head > |
003 | < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > |
004 | < title >显示行号的文本框效果,兼容ie、火狐等浏览器</ title > |
005 | < style type = "text/css" > |
006 | #main{color:#666} |
007 | textarea{border:1px solid #7f9db9;font-size:9pt;width:430px;color:#000} |
008 | .grey{color:#999} |
009 | #msg1,#msg2,#msg3,#msg4{ display:none} |
010 | #ol{position:absolute;z-index:1;padding:0px;margin:0px;border:0px;background:#ecf0f5;width:23px;text-align:left; } |
011 | #li{background:#ecf0f5;height:160px;overflow:hidden;width:32px;border-right:0;line-height:20px;margin:0px;padding:0px;text-align:center} |
012 | #c2{font-family:Arial, Helvetica, sans-serif;height:160px; margin:0px; width:416px;padding:0 0 0 35px;overflow-x: hidden;line-height:20px;} |
013 | </ style > |
014 | < script type = "text/javascript" > |
015 | String.prototype.trim2=function(){ |
016 | return this.replace(/(^\s*)|(\s*$)/g, ""); |
017 | } |
018 | function F(objid){ |
019 | return document.getElementById(objid).value; |
020 | } |
021 | function G(objid){ |
022 | return document.getElementById(objid); |
023 | } |
024 | </ script > |
025 | </ head > |
026 | < body onLoad = "keyUp();" > |
027 | < div > |
028 | < table width = "100%" border = "0" cellspacing = "0" cellpadding = "0" style = "position:relative" > |
029 | < tr > |
030 | < td width = "55%" > |
031 | < div id = "ol" >< textarea cols = "2" rows = "10" id = "li" disabled></ textarea ></ div > |
032 | < textarea name = "co" cols = "60" rows = "10" wrap = "off" id = "c2" onblur = "check('2')" onKeyUp = "keyUp()" onFocus = "clearValue('2')" onscroll = "G('li').scrollTop=this.scrollTop;" oncontextmenu = "return false" class = "grey" >请在这里粘入多段字看一看。 |
033 | </ textarea > |
034 | </ td > |
035 | </ tr > |
036 | </ table > |
037 | </ div > |
038 | < em class = "block" id = "msg2" >文本框没有内容。</ em > |
039 | < script type = "text/javascript" > |
040 | var msgA=["msg1","msg2","msg3","msg4"]; |
041 | var c=["c1","c2","c3","c4"]; |
042 | var slen=[50,20000,20000,60];//允许最大字数 |
043 | var num="";//http://www.phpernote.com/javascript-function/752.html |
044 | var isfirst=[0,0,0,0,0,0]; |
045 | function isEmpty(strVal){ |
046 | if( strVal=="" ) |
047 | return true; |
048 | else |
049 | return false; |
050 | } |
051 | function isBlank(testVal){ |
052 | var regVal=/^\s*$/; |
053 | return (regVal.test(testVal)) |
054 | } |
055 | function chLen(strVal){ |
056 | strVal=strVal.trim2(); |
057 | var cArr=strVal.match(/[^\x00-\xff]/ig); |
058 | return strVal.length+(cArr==null ? 0 : cArr.length); |
059 | } |
060 | function check(i){ |
061 | var iValue=F("c"+i); |
062 | var iObj=G("msg"+i); |
063 | var n=(chLen(iValue)>slen[i-1]); |
064 | if((isBlank(iValue)==true)||(isEmpty(iValue)==true)||n==true){ |
065 | iObj.style.display ="block"; |
066 | }else{ |
067 | iObj.style.display ="none"; |
068 | } |
069 | } |
070 | function checkAll(){ |
071 | for(var i=0;i< msgA.length ;i++){ |
072 | check(i+1); |
073 | if(G(msgA[i]).style.display=="none"){ |
074 | continue; |
075 | }else{ |
076 | alert("填写错误,请查看提示信息!"); |
077 | return; |
078 | } |
079 | } |
080 | G("form1").submit(); |
081 | } |
082 | function clearValue(i){ |
083 | G(c[i-1]) .style.color = "#000" ; |
084 | keyUp(); |
085 | if(isfirst[i]==0){ |
086 | G(c[i-1]) .value = "" ; |
087 | } |
088 | isfirst[i]=1; |
089 | } |
090 | function keyUp(){ |
091 | var obj = G ("c2"); |
092 | var str = obj .value; |
093 | str =str.replace(/\r/gi,""); |
094 | str =str.split("\n"); |
095 | n = str .length; |
096 | line(n); |
097 | } |
098 | function line(n){ |
099 | var lineobj = G ("li"); |
100 | for(var i = 1 ;i<=n;i++){ |
101 | if(document.all){ |
102 | num+=i+"\r\n"; |
103 | }else{ |
104 | num+=i+"\n"; |
105 | } |
106 | } |
107 | lineobj.value = num ; |
108 | num = "" ; |
109 | } |
110 | function autoScroll(){ |
111 | var nV = 0 ; |
112 | if(!document.all){ |
113 | nV = G ("c2").scrollTop; |
114 | G("li") .scrollTop = nV ; |
115 | setTimeout("autoScroll()",20); |
116 | } |
117 | } |
118 | if(!document.all){ |
119 | window.addEventListener("load",autoScroll,false); |
120 | } |
121 | </script> |
122 | </ body > |
123 | </ html > |