这篇文章主要讲解了“uniapp怎么自定义验证码输入框并隐藏光标”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“uniapp怎么自定义验证码输入框并隐藏光标”吧！点击输入框唤起键盘，蓝框就相当于input的光标，验证码输入错误或者不符合格式要求会将字体以及边框改成红色提示，持续1s，然后清空数据，恢复原边框样式；5位验证码输入完毕，点击页面其他位置，隐藏键盘；这时如果发现验证码有误，再次点击输入框又唤起键盘，也能正常删除数字（这里其实做的时候遇到了bug，再次聚焦不能删除错误数字，下文会讲到）。具体实现思路：将input标签相对于父元素做绝对定位，与父元素左边距设置为负的本身宽度即可（position: absolute; top: 0; left：-100%; width: 100%; height: 100%;）。动态去设置input的focus属性。input同级使用for循环去创建5个正方形的view标签。给input同级创建的view标签绑定点击事件，在点击事件方法实现中去设置input的focus属性为true，即可弹出键盘。在键盘输入的时候，即可触发input属性的一系列方法，利用v-model双向绑定，将input输入的值赋值给循环的view方框即可。这样input也就不在屏幕中，但是又可以触发input的事件。总的来说就是，使用for循环去创建5个正方形的view标签，然后创建一个input标签，type=tel，最大输入长度为5（根据需求来设置），再将input伪隐藏掉，获取的值分别放到5个view中展示。验证码失败后利用v-model双向绑定，清空输入的值，增加错误提示文字和边框样式。父组件子组件1）input 的type=‘number’, ios手机正常，光标在内容最后，但Android手机光标有时候在内容最前面，导致聚焦内容删不掉。修改input 的type = 'tel'，:cursor="intviation_code.length"， 这样cursor属性才生效，并指定focus时光标的位置在内容最后；
type=‘tel’，也会有个小问题，可以输入一些字符，但是我们的需求只能是数字，所以代码中要做限制。就能解决这个问题了。这个cursor无效的问题，在h6模式应该是type的原因，我试了在type是number或digit时cursor就无效，text、tel、idcard就有效2）还有另外一种方法设置input的type=“number”，就不需要设置光标位置了；然后隐藏input文字和光标，相当于间接隐藏了input框；用到了css样式设置，color: transparent; caret-color: transparent;最主要的还是相对于父元素做绝对定位，与父元素左边距设置为负的本身宽度的一半即可（position: absolute; top: 0; left：-100%; width: 200%; height: 100%;）with: 200%为了增大点击区域，解决Android机型再次唤起键盘不能聚焦，删不掉错误数字的问题。张鑫旭的CSS改变插入光标颜色caret-color简介及其它变色方法
自我测试CSS : caret-color感谢各位的阅读，以上就是“uniapp怎么自定义验证码输入框并隐藏光标”的内容了，经过本文的学习后，相信大家对uniapp怎么自定义验证码输入框并隐免费云主机域名藏光标这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是百云主机，小编将为大家推送更多相关知识点的文章，欢迎关注！
相关推荐: 基于Python怎么实现智能停车场车牌识别计费系统
这篇文章主要介绍“基于Python怎么实现智能停车场车牌识别计费系统”，在日常操作中，相信很多人在基于Python怎么实现智能停免费云主机域名车场车牌识别计费系统问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”基于Python怎么…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
