工作中遇到的问题总结

1、问题：安卓手机点击input框，会被键盘挡住

解决方案：写个js即可

 // 处理安卓手机输入法遮挡输入框问题
    if ((/Android/gi).test(navigator.userAgent)) {
        window.addEventListener('resize', function () {
            if (document.activeElement.tagName == 'INPUT' || 
                document.activeElement.tagName == 'TEXTAREA') {
                window.setTimeout(function () {
                    document.activeElement.scrollIntoViewIfNeeded();
                }, 0);
            }
        });
    } 

最终效果：

安卓手机点击输入框时，会判断该输入框是否在可视区域，不在时会自动置于可视区域。

苹果手机点击输入框时，不管该输入框是否在可视区域，都会将输入框置于可视区域最中间。

2、问题：单页面开发跳转页面后页面还停留在前一个页面的位置，不会自动回到顶部

解决方案：在路由钩子router.afterEach方法中加入一行代码：

document.body.scrollTop = document.documentElement.scrollTop = 0;

最终效果：

每次跳转页面之后页面的滚动距离都重置为0，页面就能回到顶部。

3、问题：vue 单页面开发vue-router history模式下页面刷新报404:

原因：history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。

解决方案：你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

4、localstorage、sessionstorage缓存超出限额问题：

如果本地存储base64图片过多会造成本地存储超出缓存的问题：浏览器会报failde to execute setitem on storage 异常，

5、npm install出现"Unexpected end of JSON input while parsing near"错误解决方法

npm 安装报错
error Unexpected end of JSON input while parsing near '...r":"7.0.0-beta.32"},"'
 

npm ERR!      errno: -4048,
npm ERR!      code: 'EPERM',
npm ERR!      syscall: 'unlink',

Error: EPERM: operation not permitted, unlink 

强制清理一下缓存即可
npm cache clean --force

6、el-input在ie浏览器下文字不居中的问题： 

解决方法：size: mini

7、ie浏览器下，密码输入框后面会有眼睛图标：

解决方法：

input::-ms-clear {display:none;}

input::-ms-reveal {display:none;}

8、qq浏览器下，去掉input输入框黄色背景：

解决方法：

input:-webkit-autofill{

-webkit-box-shadow: 0 0 0px 1000px white inset !important;

border: 1px solid #ddd !important;

}

9、解决浏览器记住密码后，input密码输入框自动填充的问题：（见收藏）

10、ie浏览器网络get请求缓存问题：

问题描述：ie浏览器下get请求如果参数值相同，会被浏览器缓存，导致数据库数据已经变化，但是前端获取的数据不能及时更新；

解决方法：get请求加上时间戳保证每次请求参数都不一样，防止浏览器缓存；

11、ie浏览器下为了能实现貌似一次上传多个文件的功能，input采取ajax提交，并且每次上传后要把input的值设为空，这样才能进行下一次上传。

这样问题出现了：其他浏览器都没问题，只有ie11有问题，它把js改变input的value都当作change事件处理了，这样每次点击“添加文件”，事件函数都会执行两次，即使文件上传成功了，也会提示错误信息：("文件限于pdf,doc,docx,ppt,pptx格式")

12、微信小程序scroll-view标签不能嵌套video、 textarea、 map、 canvas等原生组件，会有很多问题，video标签层级过高会造成页面样式混乱。视频退出全屏显示后也会出现其它视频加载不出来，scroll-into-view失效等问题。

解决方法：使用image代替video标签展示视频预览，点击播放使用弹出层嵌套video标签代替，image标签可以用阿里云视频截帧获取第一帧作为显示图片 具体文档可参考  https://help.aliyun.com/document_detail/64555.html?spm=5176.11065259.1996646101.searchclickresult.4d6a5fd8PwJyBq 

转载于:https://www.cnblogs.com/liuhan0727/p/10238560.html