layui文本域怎么获取当前输入的行数-Layui教程-PHP中文网

直接用textarea.value.split('\n').length统计换行次数即可，但需注意它返回的是“换行符个数+1”，空文本结果为1；若校验最多n行，应配合math.min(n, count)截断，且须先统一换行符为\n再split。

layui文本域怎么获取当前输入的行数

直接用 textarea.value.split('\n').length 是最简方式，但它返回的是“换行符个数 + 1”，不是用户直觉里的“显示出来的行数”——比如空 textarea 返回 1，末尾带换行会多算一行。真实场景中，你要的是光标当前在第几行、或者内容占了几行显示区域。

若只需统计「换行次数」（如校验最多 5 行输入），用 textarea.value.split('\n').length 即可，但记得 Math.min(5, count) 做截断
若要匹配 UI 渲染行数（考虑自动折行、宽度限制），必须结合 DOM 计算：用 getClientRects() 或监听 input 后调用 textarea.scrollHeight / parseInt(getComputedStyle(textarea).lineHeight)，但后者受字体、padding 影响大，误差常达 ±1 行
别用 textarea.rows 属性——它只是 HTML 的初始行数声明，和实际内容无关

Layui 的 textarea 如果套在 layui-form 里，且没手动绑定事件，onchange 会延迟触发（等失焦且值变化才发），而用户敲回车时行数已变，但事件还没冒泡上来。

正确做法是监听 input 事件：textarea.addEventListener('input', () => { /* 取行数 */ })
如果用了 form.render() 或 form.on('submit')，记得在回调里重新读 textarea.value，别依赖闭包里旧的引用
移动端软键盘收起时可能不触发 input，需额外监听 blur 做兜底

很多人把行数提示塞进 layui-form-item 内部，结果响应式下错位、被遮挡。Layui 默认不为 textarea 预留空间，得手动控制。

一款深蓝色网站后台管理系统layui框架模板

下载

HTML 结构建议：在 layui-form-text 的 div 外层加一个包裹容器，再追加 <div class="layui-textarea-line-count"></div>
CSS 必须设 position: relative 在包裹容器上，提示 div 设 position: absolute; bottom: -20px; right: 0;
避免用 margin-bottom 推挤——Layui 的表单验证提示会动态插入，导致布局跳动

用户粘贴内容时，可能带 \r\n（Windows）或 \r（老 Mac），而浏览器统一转成 \n；但如果你用正则 /\r\n/g 替换再 split，反而会漏掉单 \r 或混合换行。

安全写法：textarea.value.replace(/\r\n/g, '\n').replace(/\r/g, '\n').split('\n').length
更稳妥：先 normalize 换行符，再 split：textarea.value.split(/[\r\n]+/).filter(Boolean).length（过滤空行）
注意：用户按 Shift+Enter 插入软换行（
```
<br>
```
），这种不会出现在 value 里，纯前端无法捕获——得靠富文本编辑器

真正麻烦的是行高不一致：中文字体、英文等宽字体、emoji 混排时，同一行可能渲染成两行，但 value 里仍是 1 个 \n。这种只能后端按渲染规则校验，前端最多给个大致提示。