簡單文本編輯器 · 前端開發

簡單文本編輯器： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>簡單文本編輯器</title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; font: 12px/1.5 tahoma, arial, 'hiragino sans gb', 'microsoft yahei', sans-serif; -webkit-font-smoothing: antialiased; overflow: hidden; } #mian { width: 640px; height: 100%; } #leftBox { background: #ecf0f5; width: 35px; height: 100%; text-align: left; float: left; } #test { border: 1px solid #eaeaea; outline: none; width: 600px; height: 100%; resize: none; background: rgb(250, 250, 250); line-height: 24px; font-size: 14px; float: left; padding: 10px 8px; color: black; font-family: inherit; box-sizing: border-box; } #leftNum { height: 100%; width: 100%; resize: none; outline: none; overflow-y: hidden; overflow-x: hidden; border: 0; background: rgb(247, 247, 247); color: #999; line-height: 24px; font-size: 14px; padding: 10px 4px; text-align: right; font-weight: bold; box-sizing: border-box; } </style> </head> <body> <div id="mian"> <div id="leftBox"><textarea wrap="off" cols="2" id="leftNum" disabled></textarea> </div> <textarea id="test" name="content" onkeyup="keyUp()" onscroll="getId('leftNum').scrollTop = this.scrollTop;"></textarea> </div> <script type="text/javascript"> var num = ""; var test = getId('test'); function getId(obj) { return document.getElementById(obj); } function keyUp() { var str = test.value; str = str.replace(/\r/gi, ""); // \r匹配一個回車符 str = str.split("\n"); n = str.length; line(n); } function line(n) { var lineobj = getId("leftNum"); for (var i = 1; i <= n; i++) { if (document.all) { num += i + "\r\n";// 判斷瀏覽器是否是IE \n匹配一個換行符 } else { num += i + "\n"; } } lineobj.value = num; num = ""; } </script> </body> </html> ```