文本框显示行号
<style>
/*文本框显示行号*/
#msg1,#msg2,#msg3,#msg4{display:none}
#ol{position:absolute;top:17px;left:17px;height:205px;z-index:1;padding:0;margin:0;border:0;background:#ecf0f5;width:23px;text-align:left;resize:none;opacity:0.5;}
#li{background:#ecf0f5;height:199px;overflow:hidden;width:32px;border:none;line-height:20px;margin:0;padding-top:13px;text-align:center;resize:none;}
.texts{float:left;width:566px;height:200px;line-height:20px;font:18px Courier New,sans-serif;border:5px solid #f18200;border-radius:2px;resize:none;padding:5px 0 0 45px;margin:12px;overflow:auto;}
</style>
<div class="search">
<div id="ol">
<textarea id="li" cols="2" rows="10" disabled></textarea>
</div>
<textarea id="c2" name="co" class="texts" cols="40" rows="3" wrap="off" onblur="check('2')" onkeyup="keyUp()" onFocus="clearValue('2')" onscroll="G('li').scrollTop = this.scrollTop;" oncontextmenu="return false" placeholder="Do something"></textarea>
</div>
<script src="https://flamez57.github.io/carousel/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
/*文本框显示行号*/
//利用Javascript中每个对象(Object)的prototype属性我们可以为Javascript中的内置对象添加我们自己的方法和属性。
//为String对象增加一个trim方法
String.prototype.trim2 = function()
{
return this.replace(/(^\s*)|(\s*$)/g, "");
}
function F(objid){
return document.getElementById(objid).value;
}
function G(objid){
return document.getElementById(objid);
}
/*文本框显示行号*/
var msgA=["msg1","msg2","msg3","msg4"];
var c=["c1","c2","c3","c4"];
var slen=[50,20000,20000,60];//允许最大字数
var num="";
var isfirst=[0,0,0,0,0,0];
function isEmpty(strVal){
if( strVal == "" ){
return true;
}else{
return false;
}
}
function isBlank(testVal){
var regVal=/^\s*$/;
return (regVal.test(testVal))
}
function chLen(strVal){
strVal=strVal.trim2();
var cArr = strVal.match(/[^\x00-\xff]/ig);
return strVal.length + (cArr == null ? 0 : cArr.length);
}
function check(i){
var iValue=F("c"+i);
var iObj=G("msg"+i);
var n=(chLen(iValue)>slen[i-1]);
if((isBlank(iValue)==true)||(isEmpty(iValue)==true)||n==true){
iObj.style.display ="block";
}else{
iObj.style.display ="none";
}
}
function checkAll(){
for(var i=0;i<msgA.length; i++){
check(i+1);
if(G(msgA[i]).style.display=="none"){
continue;
}else{
alert("填写错误,请查看提示信息！");
return;
}
}
G("form1").submit();
}
function clearValue(i){
G(c[i-1]).style.color="#000";
keyUp();
if(isfirst[i]==0){
G(c[i-1]).value="";
}
isfirst[i]=1;
}
function keyUp(){
var obj=G("c2");
var str=obj.value;
str=str.replace(/\r/gi,"");
str=str.split("\n");
n=str.length;
line(n);
}
function line(n){
var lineobj=G("li");
for(var i=1;i<=n;i++){
if(document.all){
num+=i+"\r\n";
}else{
num+=i+"\n";
}
}
lineobj.value=num;
num="";
}
function autoScroll(){
var nV = 0;
if(!document.all){
nV=G("c2").scrollTop;
G("li").scrollTop=nV;
setTimeout("autoScroll()",20);
}
}
if(!document.all){
window.addEventListener("load",autoScroll,false);
}
</script>
