textarea加行号（二）

马黑黑 · 发表于 2023-1-6 12:02

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

1

马黑黑 · 发表于 2023-1-6 12:12

textarea自动折行之下的行号演示

实现方法：两个textarea并排，一个显示行号，一个显示正文。为了计算自动折行的文本高度，用一个不可见的 div 框（opacity: 0）动态测量每行文本占据的实际高度，这个div测量器提供的数据是行号形成的计算依据之一。

一楼效果，支持文本框双击选中整行（段），还支持单击行号选中编辑框整行（段）。

代码放在楼下。

马黑黑 · 发表于 2023-1-6 12:13

<style>
#papa {
margin: auto;
width: 740px;
height: 520px;
box-shadow: 3px 3px 20px #000;
outline: 4px solid #eee;
border-radius: 1px;
position: relative;
}
#chkHeight {
position: absolute;
left: 60px;
width: calc(100% - 60px);
border:1px solid #ccc;
border-left: none;
padding: 6px;
font: normal 16px/20px monospace;
white-space:pre-wrap;
word-break: break-all;
box-sizing: border-box;
opacity: 0;
}
#papa > textarea {
position: absolute;
padding: 6px;
resize: none;
border-color: #ccc;
outline: none;
box-sizing: border-box;
font: normal 16px/20px monospace;
}
#maintxtbox {
width: calc(100% - 60px);
height: 100%;
left: 60px;
background: #fff;
border-left: none;
word-break: break-all;
}
#linetxtbox {
width: 60px;
height: 100%;
text-align: right;
background: #eee;
color: gray;
overflow: hidden;
cursor: default;
}
</style>
<div id="papa">
<div id="chkHeight"></div>
<textarea id="linetxtbox" readonly>1</textarea>
<textarea id="maintxtbox"></textarea>
</div>
<script>
//函数：显示行号
let showLineIdx = (ele,e) => {
chkHeight.style.cssText += ele.clientHeight < ele.scrollHeight ? 'overflow-y : scroll' : 'overflow-y: auto';
let lines = ele.value.split('\n'), all = lines.length, linestr = '';;
for (j = 0; j < all; j ++) {
linestr += j + 1;
chkHeight.innerText = lines[j];
let total = (chkHeight.clientHeight - 12) / 20 || 1;
linestr += '\n'.repeat(total);
}
linetxtbox.value = linestr;
linetxtbox.scrollTop = maintxtbox.scrollTop;
};
//编辑框输入事件
maintxtbox.oninput = (e) => {
showLineIdx(maintxtbox,e);
};
//函数：选中行
let selectLine = (ele,num) => {
let mpos, tstr = '';
let ar = ele.value.split('\n');
for (j = 0; j < num; j ++) {
tstr += ar[j] + 2;
}
mpos = tstr.length;
ele.setSelectionRange(mpos, mpos + ar[num].length);
ele.focus();
};
//编辑框双击事件
maintxtbox.ondblclick = () => {
let pos = maintxtbox.selectionStart;
let tmpar = maintxtbox.value.substring(0, pos).split('\n');
selectLine(maintxtbox, tmpar.length - 1);
};
//编辑框滚动事件
maintxtbox.onscroll = () => linetxtbox.scrollTop = maintxtbox.scrollTop;
//行号单击击事件
linetxtbox.onclick = () => {
let pos = linetxtbox.selectionStart, ar = linetxtbox.value.split('\n'), len = 0,idx = 0;
for(j = 0; j < ar.length; j ++) {
len += ar[j].length + 1;
if (len > pos) {
idx = ar[j];
break;
}
}
selectLine(maintxtbox, idx - 1);
};
//编辑框获得焦点事件
//maintxtbox.onfocus = () => papa.style.outlineColor = '#aaa';
//编辑框失去焦点事件
//maintxtbox.onblur = () => papa.style.outlineColor = '#eee';
</script>