这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 javascript 实现行号显示的文本框效果,这样就可以解决读者很难迅速找到所在某一行的对应代码,感兴趣的小伙伴们可以参考一下
利用 js 打造的一个非常实用简易的文本编辑框,可以显示行号并且同时兼容 ie 和 firefox 等主流浏览器,如下效果图:
以下是该效果的源码:
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
- <title>
- 显示行号的文本框效果,兼容ie、火狐等浏览器
- </title>
- <style type="text/CSS">
- #main{color:#666} textarea{border:1px solid #7f9db9;font-size:9pt;width:430px;color:#000}
- .grey{color:#999} #msg1,#msg2,#msg3,#msg4{ display:none} #ol{position:absolute;z-index:1;padding:0px;margin:0px;border:0px;background:#ecf0f5;width:23px;text-align:left;
- } #li{background:#ecf0f5;height:160px;overflow:hidden;width:32px;border-right:0;line-height:20px;margin:0px;padding:0px;text-align:center}
- #c2{font-family:Arial, Helvetica, sans-serif;height:160px; margin:0px;
- width:416px;padding:0 0 0 35px;overflow-x: hidden;line-height:20px;}
- </style>
- <script type="text/javascript">
- 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);
- }
- </script>
- </head>
- <body onLoad="keyUp();">
- <div>
- <table width="100%" border="0" cellspacing="0" cellpadding="0" style="position:relative">
- <tr>
- <td width="55%">
- <div id="ol">
- <textarea cols="2" rows="10" id="li" disabled>
- </textarea>
- </div>
- <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">
- 请在这里粘入多段字看一看。
- </textarea>
- </td>
- </tr>
- </table>
- </div>
- <em class="block" id="msg2">
- 文本框没有内容。
- </em>
- <script type="text/javascript">
- 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) {
- strValstrVal = 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;
- strstr = str.replace(/\r/gi, "");
- strstr = 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>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0711/269024.html