有时候要实现带有滚动条或者带有行号的文本输入区域，采用css可以很简单的实现。
实现方式一：
使用 CodeMirror 来实现 ：CodeMirror官网
官网实例地址：CodeMirror示例
可以选择不同的示例场景，比如代码折叠、双向文本、自定义滚动条等等
如果你想使用不同的主题请修改下面代码的第10行和第40行，加载你想使用的主题 js 和修改主题名称。
可参考的主题：codemirror主题效果概览
代码
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<!--codemirror必须引入的-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/codemirror.min.js"></script>
<!--引入css文件，用以支持主题-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/theme/mdn-like.css" rel="stylesheet" />
<!--对光标所在行和选中区域高亮-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/selection/active-line.js"></script>
<!--javascript代码高亮-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/mode/javascript/javascript.min.js"></script>
<!--xml代码高亮-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/mode/xml/xml.min.js"></script>
<!--java代码高亮-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/mode/clike/clike.min.js"></script>
<!--支持代码折叠-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/foldgutter.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/foldcode.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/foldgutter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/brace-fold.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.3/addon/fold/comment-fold.js"></script>
</head>
<body >
<div >
<textarea class="form-control" id="code" name="code"></textarea>
</div>
<script type="text/javascript" >
//根据DOM元素的id构造出一个编辑器
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "application/xml", //实现xml代码高亮
mode: "text/x-javascript", //实现javascript代码高亮
mode: "text/x-java", //实现Java代码高亮
lineNumbers: true, //显示行号
theme: "mdn-like", //设置主题
lineWrapping: false, //false则超过宽带会显示水平滚动条，true不会显示
foldGutter: true, //代码是否可折叠
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
matchBrackets: true, //括号匹配
indentWithTabs: true, //前 N*tabSize 个空格是否应替换为 N 个制表符
smartIndent: true, //上下文相关缩进（即是否缩进与之前的行相同）
autofocus: true,
styleActiveLine: true, //光标所在行高亮
//readOnly: true, //只读
});
editor.setSize('800px', '700px'); //设置代码框的长宽
//editor.setValue("测试测试"); //给代码框赋初始值
//editor.getValue(); //获取代码框的值
</script>
</body>
</html>
效果
百度云离线代码：
https://pan.baidu.com/s/14-ZmBNqYackBb8CYq31a5w
提取码：bvqf
实现方式二
这种方式通过jQuery实现
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>JQuery Lined TextArea Example</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script >
(function($) {
$.fn.linedtextarea = function(options) {
// Get the Options
var opts = $.extend({}, $.fn.linedtextarea.defaults, options);
/*
* Helper function to make sure the line numbers are always
* kept up to the current system
*/
var fillOutLines = function(codeLines, h, lineNo){
while ( (codeLines.height() - h ) <= 0 ){
if ( lineNo == opts.selectedLine )
codeLines.append("<div class='lineno lineselect'>" + lineNo + "</div>");
else
codeLines.append("<div class='lineno'>" + lineNo + "</div>");
lineNo++;
}
return lineNo;
};
/*
* Iterate through each of the elements are to be applied to
*/
return this.each(function() {
var lineNo = 1;
var textarea = $(this);
/* Turn off the wrapping of as we don't want to screw up the line numbers */
textarea.attr("wrap", "off");
textarea.css({resize:'none'});
var originalTextAreaWidth = textarea.outerWidth();
/* Wrap the text area in the elements we need */
textarea.wrap("<div class='linedtextarea'></div>");
var linedTextAreaDiv = textarea.parent().wrap("<div class='linedwrap' style='width:" + originalTextAreaWidth + "px'></div>");
var linedWrapDiv = linedTextAreaDiv.parent();
linedWrapDiv.prepend("<div class='lines' style='width:50px'></div>");
var linesDiv = linedWrapDiv.find(".lines");
linesDiv.height( textarea.height() + 6 );
/* Draw the number bar; filling it out where necessary */
linesDiv.append( "<div class='codelines'></div>" );
var codeLinesDiv = linesDiv.find(".codelines");
lineNo = fillOutLines( codeLinesDiv, linesDiv.height(), 1 );
/* Move the textarea to the selected line */
if ( opts.selectedLine != -1 && !isNaN(opts.selectedLine) ){
var fontSize = parseInt( textarea.height() / (lineNo-2) );
var position = parseInt( fontSize * opts.selectedLine ) - (textarea.height()/2);
textarea[0].scrollTop = position;
}
/* Set the width */
var sidebarWidth = linesDiv.outerWidth();
var paddingHorizontal = parseInt( linedWrapDiv.css("border-left-width") ) + parseInt( linedWrapDiv.css("border-right-width") ) + parseInt( linedWrapDiv.css("padding-left") ) + parseInt( linedWrapDiv.css("padding-right") );
var linedWrapDivNewWidth = originalTextAreaWidth - paddingHorizontal;
var textareaNewWidth = originalTextAreaWidth - sidebarWidth - paddingHorizontal - 20;
textarea.width( textareaNewWidth );
linedWrapDiv.width( linedWrapDivNewWidth );
/* React to the scroll event */
textarea.scroll( function(tn){
var domTextArea = $(this)[0];
var scrollTop = domTextArea.scrollTop;
var clientHeight = domTextArea.clientHeight;
codeLinesDiv.css( {'margin-top': (-1*scrollTop) + "px"} );
lineNo = fillOutLines( codeLinesDiv, scrollTop + clientHeight, lineNo );
});
/* Should the textarea get resized outside of our control */
textarea.resize( function(tn){
var domTextArea = $(this)[0];
linesDiv.height( domTextArea.clientHeight + 6 );
});
});
};
// default options
$.fn.linedtextarea.defaults = {
selectedLine: -1,
selectedClass: 'lineselect'
};
})(jQuery);
</script>
<style>
body { background-color: #fafafa; font-family: 'Roboto Condensed'; }
.container { margin: 150px auto; max-width: 960px; text-align: center;}
.linedwrap {
border: 1px solid #c0c0c0;
padding: 3px;
}
.linedtextarea {
padding: 0px;
margin: 0px;
}
.linedtextarea textarea, .linedwrap .codelines .lineno {
font-size: 10pt;
font-family: monospace;
line-height: normal !important;
}
.linedtextarea textarea {
padding-right:0.3em;
padding-top:0.3em;
border: 0;
}
.linedwrap .lines {
margin-top: 0px;
width: 50px;
float: left;
overflow: hidden;
border-right: 1px solid #c0c0c0;
margin-right: 10px;
}
.linedwrap .codelines {
padding-top: 5px;
}
.linedwrap .codelines .lineno {
color:#AAAAAA;
padding-right: 0.5em;
padding-top: 0.0em;
text-align: right;
white-space: nowrap;
}
.lined{
border: none;
outline: none;
width: 700px;
}
</style>
</head>
<body>
<div class="container">
<textarea class="lined" rows="30" cols="60"></textarea>
</div>
<script>
$(function() {
$(".lined").linedtextarea(
{selectedLine: 4}
);
});
</script>
</body>
</html>
效果
实现方式三
这种方式是通过背景图添加行号的，经过测试最大行号是1500行，超过的就不会显示行号了。
代码
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<style>
.lined-textarea {
background: url(http://i.imgur.com/2cOaJ.png);
background-attachment: local;
background-repeat: no-repeat;
padding-left: 35px;
padding-top: 10px;
border-color: #ccc;
font-size: 13px;
line-height: 16px;
resize: none;
overflow-y:scroll;
overflow-x:scroll;
overflow-wrap: normal;
width:600px;
border: none;
outline: none;
}
</style>
</head>
<body >
<div>
<textarea rows="20" cols="30" class="lined-textarea"></textarea>
</div>
</body>
</html>
效果
参考：
Adding Line Numbers To HTML Textarea
HTML Textarea with Line Numbers – jQuery Lined Textarea
Add line numbers to text area using javascript
4403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
