textarea智能缩进

马黑黑 · 发表于 2023-1-3 10:13

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

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

x

作为轻量级的多行文本编辑控件，textarea 非常经济实惠，但它原生的属性不多，智能自动缩进需要通过编程实现。本文，提供一个自研的自动缩进功能，即，按下回车键后，根据上一行是否有缩进、缩进多少个 tab 和空格来实现下一行也拥有相同的缩进形式。

思路是，监测文本框的 keyup（键位弹起）事件，如果 keyCode === 13，可判断操作的键位是回车键，则运行预设的处理缩进函数。

代码如下：

<style>
#txtbox {
   margin: 50px auto;
   width: 600px;
   height: 400px;
   display: block;
   padding: 10px;
}
</style>

<textarea id="txtbox"></textarea>

<script>

//智能缩进函数 参数  ele 文本框元素
let insetIndent = (ele) => {
   //获取 start - 选择区起始值 end - 选择区结束值 selected - 被选择的字符串
   //注：没有被选择文本时就是光标所在的pos值，此时 start = end
   let start = ele.selectionStart, end = ele.selectionEnd, selected = ele.value.substring(start,end);
   //获取 str1 - 选择区上半部分文本 str2 - 选择区下半部分文本 
   let str1 = ele.value.substring(0, start), str2 = ele.value.substring(end);
   //将上半部分按行拆分为 strAr 数组
   let strAr = str1.split('\n');
   //获得目标行 ：回车按下后倒数第二行
   let targetLine = strAr[strAr.length - 2];
   //通过匹配行首空格(tab也被视为空格)获取待处理缩进字符数组
   let tmpAr = targetLine.match(/^[\s]+/g);
   //声明缩进字符变量
   let indent = '';
   //若缩进字符数组不为空 ：将缩进字符加入到 indent 变量
   if (tmpAr !== null) indent += tmpAr[0];
   //重组文本框文本
   ele.value = str1 + indent + str2;
   //设置光标位置
   ele.setSelectionRange(start + indent.length, start + indent.length);
}

//键盘键位弹起事件
txtbox.onkeyup = (e) => {
   //如果键位 keyCode 值等于 13 表明按下的是回车键，运行智能缩进函数
   if(e.keyCode === 13) insetIndent(txtbox,e);
}

</script>

效果看楼下，欢迎测试。

马黑黑 · 发表于 2023-1-3 10:14

马黑黑 · 发表于 2023-1-3 10:14

二楼完整代码：

<style>
#txtbox {
margin: 50px auto;
width: 600px;
height: 400px;
display: block;
padding: 10px;
position: relative;
}
</style>
<textarea id="txtbox"></textarea>
<script>
let insetIndent = (ele) => {
let start = ele.selectionStart, end = ele.selectionEnd, selected = ele.value.substring(start,end);
let str1 = ele.value.substring(0, start), str2 = ele.value.substring(end);
let strAr = str1.split('\n');
let targetLine = strAr[strAr.length - 2];
let tmpAr = targetLine.match(/^[\s]+/g);
let indent = '';
if (tmpAr !== null) indent += tmpAr[0];
ele.value = str1 + indent + str2;
ele.setSelectionRange(start + indent.length, start + indent.length);
}
txtbox.onkeyup = (e) => {
if(e.keyCode === 13) insetIndent(txtbox,e);
}
</script>

复制代码

马黑黑 · 发表于 2023-1-3 10:18

关于匹配 tab 和空格，用了全局开关 g ：

let tmpAr = targetLine.match(/^[\s]+/g);

这个有些浪费资源，不过也没关系，因为匹配的对象只是一行文本，量不会太大。

马黑黑 · 发表于 2023-1-3 12:49

本帖最后由马黑黑于 2023-1-3 12:51 编辑

用 onkeyup 键位弹起事件的实际效果，上屏有延时感，原因在于 onkeyup 事件的上屏有一个等待过程——按下后弹起的过程，JS要等待这个过程结束才会执行指定的功能。

消除上屏延时感现象，应弃用 keyup 事件，改用 onkeydown 事件。如此，有一个地方需要增加、两个地方需要改变：

一，增加：阻止按键的默认功能

函数开头处加一行代码：

e.preventDefault();

这是JS内置的基于DOM元素的阻止键盘、鼠标默认行为的方法。

二，改变：

（一）原来的代码 19 行：

let targetLine = strAr[strAr.length - 2];

改为：

let targetLine = strAr[strAr.length - 1];

修改原因是，即使不阻止回车键的默认行为，按下和松开对文本框文本的拆分都需要额外处理，按下未松开之前，输入光标还在原行，松开后则光标在下一行，所以这里获得目标行的处理不能再用行数组总数减去 2，只能减去 1 。

（二）原来代码 21 行：

let indent = '';

改为：

let indent = '\n';

“\n” 是换行的意思。由于修改后的代码中，前面我们阻止了回车键按下的默认换行功能，这里得还给人家，否则文本框将出现按回车键换不了行的严重后果。缩进字符变量 indent 的初始值为“\n”后，按下回车键就有换行符了，然后再根据后面的判断是否加入缩进符。