事情是这样的,前段时间我司上线了一个web产品《留学生平台》,昨天项目负责人员和我反馈说这两天发现了一个问题:在更改栏目选项时,社区发帖在输入主要文字内容时出现输入获取焦点问题。
问题这个问题在测试阶段是没有出现的,为什么线上出现了呢?我当时的反应就是不会是他们搞错了吧!自己也去试了一下,确实存在这个问题。那么,问题来了,为什么会出现这个问题?由于当时在处理别的项目,将这个问题让前端去处理了。
这里略去了一万字,前端废废了,没有处理了。晚上下班后回到家里,脑子里仍在惦记着这个事,就打开了电脑把线上的页面html源代码复制了一份。在本地新建了html文件,直接在浏览器上打开的。为什么会这么做呢?我认为无法输入肯定和服务器环境、后端语言没有关系,肯定是前端的某些代码发生了冲突,造成了获取焦点操作被驳回。
在浏览器上打开文件后,问题同线上一样,证实了我的猜想,纯粹是前端代码的问题。下面来找出问题点。从驳回方面入手,在Javascript代码中驳回是returnfalse,在页面中发现了两处代码,这两处代码的作用是禁止网页右键、禁止网页选择。代码如下:
$(document).bind(contextmenu,function(){returnfalse;});$(document).bind(selectstart,function(){returnfalse;});
看到了这两处代码,就明白了问题所在,将两处进行依次注释,测试后是selectstart事件导致的无法获取焦点。这里忘记说了一个问题,无法获取焦点的是一个富文本编辑器,使用的wangEditor,在输入区内点击的时候触发了selectstart事件,导致无法获取焦点进行文本内容输入。
至此,问题已经找到,解决办法是在注释此代码,关于富文本编辑器为什么会触发此事件,暂时还是不清楚,这里请知道缘由的大神赐教。不胜感激!
总结:
1、遇到问题,先分析;
2、提出猜想、找到问题点;
3、分析发生原因、提出解决方案;