页面中富文本和textarea无法使用enter换行问题解决

时间:2024-03-29 19:35:01

问题描述

在开发过程中发现一个弹出页面中的富文本编辑器无法使用Enter键换行,后面测试使用文本域代替textarea后也无法使用换行功能。

页面中富文本和textarea无法使用enter换行问题解决

解决方法

1,初步感觉是form表单问题,可能是enter键触发了提交功能导致的无法使用换行,修改了前端页面的代码,发现只用简单的div也会这样。

页面中富文本和textarea无法使用enter换行问题解决

2,因为是在弹窗中的页面,然后自己重写了个简单demo页面不弹出,在页面中只加载一个textarea,发现可以按键,所以猜测问题只会存在弹框的按键里面,再将上面的demo弹出,事件又出现了。

3,猜测是因为某个js监听了按键,然后阻止了事件产生。

在浏览器上通过开发调试工具,找到Event Listeners,找到keydown(按键事件)这里会有关于加载页面时所有的按键监听事件,页面中富文本和textarea无法使用enter换行问题解决

通过一项项remove掉监听按键的js,然后调试前端是否可以回车,后来单独remove layer.js后,页面恢复enter按键回车功能。

点击layer.js,会定位到触发按键的地方,可以看到js里面定义了一个enter按键处理事件,如果是enter键就阻止事件产生,那问题就是这了。这里是公司的老项目,layer版本很低,不知道这里的这个代码有啥用。

页面中富文本和textarea无法使用enter换行问题解决

 

在生成环境上注释掉了这行,系统正常。