网站建设推广多少钱,浏览器主页被篡改2345,青岛北京网站建设公司,天津做网站都找津坤科技一. 前言
先看下使用场景效果图#xff1a;
点击输入框唤起键盘#xff0c;蓝框就相当于input的光标#xff0c;验证码输入错误或者不符合格式要求会将字体以及边框改成红色提示#xff0c;持续1s#xff0c;然后清空数据#xff0c;恢复原边框样式#xff1b;5位验证…一. 前言
先看下使用场景效果图
点击输入框唤起键盘蓝框就相当于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标签typetel最大输入长度为5根据需求来设置再将input伪隐藏掉获取的值分别放到5个view中展示。
验证码失败后利用v-model双向绑定清空输入的值增加错误提示文字和边框样式。
三. 代码实现
父组件
uni-popup refcodeInputPopup background-color#fff :mask-click false typecenterCodeInput:codeLength5:disabledcodeBtnDisabledcodeInputClosecodeInputClosesubmitGoodCodesubmitGoodCode/
/uni-popup
script
export default {data() {return {intviation_code:, //邀请码codeBtnDisabled: false //防止接口请求还未返回数据用户多次点击}},methods: {// 提交邀请码async submitGoodCode(intviation_code){this.codeBtnDisabled truethis.intviation_code intviation_codeconst response await this.$api.post(/ebapi/pink_api/secret_intviation_check, {code: intviation_code})if(response.code 200){this.codeBtnDisabled falsethis.$refs.codeInputPopup.close()}else{this.codeBtnDisabled falsethis.$refs.codeInputPopup.close()this.$api.msg(response.msg)}},codeInputClose(){this.$refs.codeInputPopup.close()this.codeBtnDisabled false}
}
/script子组件
templateviewview classcode-popup-topview classcode-title请输入商品邀请码/viewview classclose-icon clickcodeInputCloseuni-icons typecloseempty size30 color#999999 //view/view!-- 错误提示 --view classcode_errow v-ifcodeColor #ff0000 !isNum邀请码必须{{ codeLength }}位数/viewview classcode_errow v-ifcodeColor #ff0000 isNum 邀请码必须是数字/viewview classcode_input_conviewv-for(item, index) in codeLength:keyindexclasscode_input_item:style(index intviation_code.length? border: 5rpx solid #1195db; width: 88rpx; height: 88rpx; line-height: 80rpx;:color: codeColor ; border: 2rpx solid codeColor)clickfocus true{{ intviation_code[index] intviation_code[index] || }}/viewinputclasscinputtypetelv-modelintviation_code:maxlengthcodeLength:focusfocus:cursorintviation_code.lengthfocusfocus true blurfocus false//viewbutton:class[submit_code_btn, disabled ? btn_disabled : ]:disableddisabledclicksubmitGoodCode确定/button/view
/templatescript
export default {data() {return {codeColor: #313131, //自定义错误码颜色intviation_code: , //用户输入的验证码focus: false, // 动态获取焦点的值isNum: false,}},props: {codeLength: {type: Number,default: 5,},disabled: {type: Boolean,default: false,},},methods: {codeInputClose() {this.intviation_code this.$emit(codeInputClose)},submitGoodCode() {if (this.intviation_code.length this.codeLength) {if (Number(this.intviation_code)) {this.$emit(submitGoodCode, this.intviation_code)} else {this.isNum truethis.publicErrorSetting()}} else {this.publicErrorSetting()}},// 输入不符合规范更改样式并清空publicErrorSetting() {this.codeColor #ff0000setTimeout(() {this.intviation_code this.codeColor #313131this.isNum false}, 1000)},},
}
/scriptstyle langscss scoped
.code-popup-top {display: flex;justify-content: space-between;align-items: center;margin-bottom: 50upx;.code-title {font-size: 34upx;color: #333;font-weight: bold;position: relative;::before {content: ;position: absolute;bottom: 0;width: 40upx;height: 19upx;background: linear-gradient(to right,rgba(57, 181, 74, 1),rgba(57, 181, 74, 0.1));}}.close-icon {background: #f2f4f7;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
}
.code_errow {font-size: 30upx;color: #ff5500;margin-bottom: 20upx;
}
.submit_code_btn {width: 100%;height: 83upx;line-height: 83upx;border-radius: 7upx;background: #39b54a;color: #fff;font-size: 31upx;text-align: center;margin-top: 45upx;
}
.btn_disabled {color: rgba(255, 255, 255, 0.5) !important;background-color: rgba(57, 181, 74, 0.4) !important;
}
.code_input_con {display: flex;justify-content: space-around;position: relative;.code_input_item {margin-left: 10upx;text-align: center;line-height: 88upx;border-radius: 14upx;width: 88upx;height: 88upx;font-size: 60upx;font-weight: bold;color: #333;:last-child {margin-right: 0;}}/*input隐藏掉*/.cinput {position: absolute;top: 0;left: -100%; width: 100%;height: 100%;}
}
/style四. 过程中遇到的问题
1input 的type‘number’, ios手机正常光标在内容最后但Android手机光标有时候在内容最前面导致聚焦内容删不掉。
修改input 的type tel:cursorintviation_code.length 这样cursor属性才生效并指定focus时光标的位置在内容最后 type‘tel’也会有个小问题可以输入一些字符但是我们的需求只能是数字所以代码中要做限制。就能解决这个问题了。
这个cursor无效的问题在h5模式应该是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
templateviewinputclasscinputtypenumberv-modelintviation_code:maxlengthcodeLength:focusfocusfocusfocus true blurfocus false//view/view
/templatescript
export default {data() {return {intviation_code: , //商品邀请码focus: false,}},methods: {}
/scriptstyle langscss scoped
.cinput {position: absolute;top: 0;left: -100%;width: 200%;height: 100%;color: transparent; //输入文字颜色透明caret-color: transparent !important; //改变插入光标颜色为透明}}// 考虑兼容性// 浏览器支持caret-color属性优先使用caret-colorChrome/Firefox/Opera其次使用::first-line方法Safari最后忽略如IE。supports (-webkit-mask: none) and (not (caret-color: transparent)) {.cinput {color: transparent !important;}.cinput::first-line {color: transparent !important;}}
/style还可参考 6位验证码输入框、隐藏光标、letter-spacing失效、自定义光标光标动画 uniapp 手机验证码输入框随机数、倒计时、隐藏手机号码中间四位可以直接使用
