> 今天写项目的时候偶然的发现一个我们经常使用的input的一个小bug，我相信不少小伙伴也用过这个标签，只不过没发现其中的bug 🤣，如果你是测试工程师千万不要bug提给前端工程师哦！好的，让我从头开始复盘一下。 ## 1. 💻今天早上愉快的打开电脑 ![在这里插入图片描述](https://img-blog.csdnimg.cn/a8aacdf12db841d2b1e19ae3f8ed96fb.png) ## 2. 📃在开始写到分页功能的时候发现了问题 ![在这里插入图片描述](https://img-blog.csdnimg.cn/4e29686dda4a4319a87839a1ad9e9286.png) ## 3. 👔用的是`elementui`的[page](https://element.eleme.io/#/zh-CN/component/pagination)组件 ## 4. 👀头开始用的很丝滑，直到用到输入页数直接跳转的时候发现了秘密 ## 5. 📊（动图演示）这个分页的输入框是不支持输入正整数以外的符号的（这里不说Ant Design Vue了，他的分页都没有校验非正整数的校验法测） ![在这里插入图片描述](https://img-blog.csdnimg.cn/cac1f6d0248e4f428d3c5b00cacac3c8.gif) ## 6. 💹（动图演示）就在此刻我不经意间输入了正整数以外的符号敲了一下空格，却意外的发现光标缺漂移了，这显然是不正常的 ![在这里插入图片描述](https://img-blog.csdnimg.cn/b329a32456e14137adec4662be7c69ac.gif) ## 7. 😆于是习惯性的F12查看源代码，却发现就是一个原生的input 标签type=num ![在这里插入图片描述](https://img-blog.csdnimg.cn/fed263d7693b4fdaba2ed039b63e15d2.png) ## 8. 🍛吃个早饭回来"百度","谷歌","GPT"几乎都没有找到相应的案例 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d1faa694167849e2a4e7fb2aa8276526.png) ## 9. 🤔于是就有接下来的全方面的分析了 1. 个人认为不是elementui留下得bug而是原生得input留下得bug，于是自己写了一个input的小demo ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>输入框测试</title> <style> body { text-align: center; font-size: 30px; color: #0a628f; font-weight: bold; } input { margin-top: 60px; height: 40px; width: 500px; font-weight: bold; caret-color: red; caret-width: 2px; } </style> </head> <body> 数字输入框输入文字出现的光标Bug<br/> <input type="number" style="text-align: center"/> </body> </html> ``` 2. 最终的样式如下 ![在这里插入图片描述](https://img-blog.csdnimg.cn/1a7bc7f99ecb4fb7a070952365fcc823.png) 3. 依然只能输入数字，那么我们进行动图测试 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c1d6e65bee4240879f91b41a60da9238.gif) 4. 显而易见，这就是原生的input遗留下的bug，不过没关系，接下来我们冷静下来，解决这种问题的出现，首先给这个input绑定一个事件监听事件的函数` oninput="fixInvalidChar(event)"` ```html <body> 数字输入框输入文字出现的光标Bug<br/> <input type="number" style="text-align: center" oninput="fixInvalidChar(event)"/> </body> ``` 5. 编写他的函数 ```js <script> function fixInvalidChar(e) { console.log(e) } </script> ``` 6. 此时他的输出，能够直接看到它的data就是我们输入框输入的值 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d1104062fc694c1e9fa8c5449ade8fba.gif) 7. 此时我们知道可以拿到data属性，就能拿到他的value的值了，如果判断`e.data===''`的时候就给他一个默认值那么光标就可以会到中间的位置，保证不飘逸的操作了 ![在这里插入图片描述](https://img-blog.csdnimg.cn/adde18de384f47abaf887fbfc9309e44.gif) ```js <script> function fixInvalidChar(e) { console.log(e) if (e.data==='') { e.target.value = 0 } } </script> ``` 8. 那么不想出现0只想显示空串这个时候，可以建一个小小的延时，这个延时可以为0 ```js <script> function fixInvalidChar(e) { console.log(e) if (e.data==='') { e.target.value = 0 setTimeout(()=>{ e.target.value='' }) } } </script> ``` 9. 动图演示，我们查看它的光标位置 ![在这里插入图片描述](https://img-blog.csdnimg.cn/9655f21b20544c4ebd5fcf1f512db7de.gif) 10. 但是又出现一个小bug，那就是我们前面输入数字，后面追加非数字的符号，会将所有内容都置为空串 ![在这里插入图片描述](https://img-blog.csdnimg.cn/15c590fa5de447cca56c3731d66a7cd9.gif) 11. 解决办法，可以继续追加判断，意思是当文本框的值为空串时不进入判断就可以了 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d5fc08f176884f89bccbd1a4f6957332.gif) ```js <script> function fixInvalidChar(e) { console.log(e) if (e.data==='' && e.target.value==='') { e.target.value = 0 setTimeout(()=>{ e.target.value='' }) } } </script> ``` ## 10. 😄 最终完美解决这个小bug，特此记录下，如果你是测试工程师，不要将这个bug告诉你的前端工程师哦~ ## 11. 🥂最终整杯红茶压压惊，遇事不要慌！！！ ![在这里插入图片描述](https://img-blog.csdnimg.cn/2be63dd1b3e64fafbaaefc83d5529b75.png) ## 12. 👏对了，最终将完整代码送给大家 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>关于我</title> <style> body { text-align: center; font-size: 30px; color: #0a628f; font-weight: bold; } input { margin-top: 100px; height: 40px; width: 500px; font-weight: bold; caret-color: red; } </style> </head> <script> function fixInvalidChar(e) { console.log(e) if (e.data==='' && e.target.value==='') { e.target.value = 0 setTimeout(()=>{ e.target.value='' }) } } </script> <body> 数字输入框输入文字出现的光标Bug<br/> <input type="number" style="text-align: center" oninput="fixInvalidChar(event)"/> </body> </html> ```

关于原生input内置框架数字输入框的Bug发现（动图展示-文末完整代码）

草稿哒哒说Java

已于修改

今天写项目的时候偶然的发现一个我们经常使用的input的一个小bug，我相信不少小伙伴也用过这个标签，只不过没发现其中的bug，如果你是测试工程师千万不要bug提给前端工程师哦！好的，让我从头开始复盘一下。

摘要由AtUtil通过智能技术生成

声明：本网站发布的内容（图片、视频和文字）以原创、转载和分享网络内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。微信：ZDVIP51888；邮箱：8122356@qq.com。
本文为博主原创文章，遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明，转载时需注明出处: 内容转载自: 智编生态圈👉https://www.atutil.com/article/41

AtUtil

框架

搜索

关于原生input内置框架数字输入框的Bug发现（动图展示-文末完整代码）