layui textarea 默认左对齐,需用 CSS 的 text-align: right 实现右对齐,且必须作用于原生 textarea 元素;若需真正从右往左输入(如阿拉伯语),应配合 dir="rtl" 使用。

layui 的 textarea 默认左对齐,没有内置的 align 属性控制文本方向;想让内容右对齐,必须靠 CSS 干预——这是最直接、也最容易被忽略的前提。
用 style 直接给 textarea 加 text-align: right
layui 表单中声明 textarea 时,lay-textarea 是渲染后的容器,但真正生效的是内部原生 <textarea> 元素。所以不能只改外层样式,得穿透到元素本身。
- 在 HTML 中写:
<textarea name="remark" lay-textarea style="text-align: right;"></textarea>
- 如果用 JS 动态渲染表单(比如
form.render()后),需确保style属性已存在,否则会被覆盖 - 别写成
align="right"—— 这是无效的 HTML 属性,textarea不支持 -
text-align: right只影响**光标起始位置和换行后的新行对齐**,不影响已有内容的实时重排(比如粘贴一段左对齐文字后不会自动右移)
配合 dir="rtl" 实现真正的“从右往左”输入逻辑
单纯 text-align: right 只是视觉右对齐,输入时仍按从左到右顺序打字,长文本容易错位。若场景是阿拉伯语、希伯来语,或需要严格右起输入(如某些金融系统录入),应加 dir="rtl":
<textarea name="code" lay-textarea style="text-align: right;" dir="rtl"></textarea>
-
dir="rtl"会改变光标行为、标点符号位置、连字逻辑,比纯 CSS 更彻底 - 注意:中文混排时可能让标点(如句号、逗号)跑到文字左侧,需测试实际效果
- 移动端键盘可能自动切换为 RTL 布局,部分输入法响应不一致
动态内容加载后右对齐失效?检查渲染时机
如果 textarea 的值是 JS 后续赋的(比如 form.val('demo', {remark: 'xxx'})),text-align 依然生效,但以下情况会破坏对齐:
- 赋值后调用了
form.render()—— 它会重绘整个表单,清掉你手动加的style - 使用了
layedit富文本替代原生textarea,此时对齐规则完全由编辑器自身控制,text-align无效 - 全局 CSS 有
textarea { text-align: left !important; }这类强覆盖规则
真正麻烦的不是加样式,而是不同输入场景下对齐行为的不一致性:纯数字右对齐很干净,但中英文混排+换行+标点时,text-align: right 和 dir="rtl" 的表现差异很大,得按实际输入语言和用户习惯选一种,别混着用。


















