最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
layui文本域如何禁用回车键换行
时间:2026-08-10 17:37:49 编辑:袖梨 来源:一聚教程网
layer.prompt不支持textarea,必须改用layer.open自定义弹窗;在content中手动插入textarea,通过onkeydown="if(event.key==='Enter')event.preventDefault()"拦截回车,并配合resize:none和固定height控制样式。
layui layer.prompt 里怎么让 textarea 不响应回车换行
直接结论:layer.prompt 不支持原生 textarea,它默认只渲染 input;强行用 CSS 拉高或监听 keydown 拦截 Enter,会破坏弹窗关闭逻辑、导致重复提交或移动端软键盘行为失控。
真正可行的方案是换用 layer.open 自定义内容,手动插入 textarea 并禁用其换行能力:
- 设置
textarea的rows和style="resize: none; height: 120px;"控制尺寸 - 用
onkeydown="if(event.key==='Enter')event.preventDefault();"拦截回车(注意:必须写在内联属性里,委托绑定容易失效) - 禁用换行后,用户仍可粘贴含
n的文本——若业务上真要彻底过滤,需在提交前用.replace(/n/g, '')清洗 - 别给
textarea设name或放在form内,否则浏览器可能触发隐式 submit
layui 表格中编辑态的 input 如何禁用回车跳行
表格单元格进入 edit: 'text' 模式后,按回车默认不会保存也不会跳转——但如果你不想要这个“无反应”状态,而是希望明确禁用回车(比如防止误触),就得主动拦截。
关键点在于:不能绑定到动态生成的 input 上(DOM 会销毁),必须委托到表格容器:
- 在
table.render()的done回调里,用layui.$('.layui-table-box').on('keydown', 'td input', ...)委托监听 - 判断
e.target.matches('[contenteditable="false"]')或通过data-field排除富文本列,避免误拦 - 仅对目标列拦截:比如只有「编号」列允许编辑,其他列的 input 是只读的,那就加个 class
no-enter-edit,再用e.target.classList.contains('no-enter-edit')判断 - 执行
e.preventDefault()后,建议加e.stopPropagation(),防止事件冒泡到表格容器触发其他逻辑
为什么在 layui 表单里给 input 加了 preventDefault 还会刷新页面
根本原因不是没拦住,而是拦错了时机或对象。常见失败场景:
-
document.querySelector('input')在render前就执行,DOM 尚未生成,绑定无效 - 搜索框是表头动态生成的,用
layui.$('input[name="keyword"]')绑定一次,但table.reload()后 DOM 替换,事件丢失 - 用了
type="search"或type="submit",浏览器仍会尝试提交,哪怕没包form - 页面存在多个同名
name的 input,layui.$('input[name="xxx"]')匹配到多个,部分未被拦截
真正起效的做法是:在 done 里用精确选择器(如 input[data-search="true"])绑定,并确保每次重载都重新绑定。
textarea 禁用回车后,用户还能怎么输入换行符
禁用回车 ≠ 禁止换行符输入。用户仍可通过以下方式插入 n:
- 右键菜单 → “粘贴”含换行的文本(如从记事本复制)
- Mac 用户按
Option + Enter(部分浏览器支持) - Windows 用户按
Shift + Enter(非标准,依赖编辑器逻辑)
如果业务上绝对不允许换行符,仅靠前端拦截不可靠,必须在后端接收时统一清洗;前端可作为辅助,在提交前用 value.replace(/[rn]+/g, ' ') 替换为空格,避免字段崩坏。
相关文章
- 迅捷 FWR310 无线路由器端口映射设置指南 08-11
- 迅捷 FW150R 无线路由器端口映射设置指南 08-11
- 迅捷 FWD105 无线路由器一体机WDS桥接设置 08-11
- 迅捷 FW325R 无线路由器IP与MAC地址绑定设置 08-11
- 方舟生存进化琥珀获取指南 08-11
- 迅捷 FW150R 无线路由器作为交换机设置 08-11