制作网站网络科技公司,网站建设 思路,wordpress怎么修改图片大小,怎么做和美团一样的网站前言
大家好我是没钱的君子下流坯#xff0c;用自己的话解释自己的知识。很久很更新了#xff0c;这几个月一直在加班#xff0c;今天记录一个uniapp关于input中focus()方法自动获取焦点的坑。
案例
为了实现一个手机验证码的页面#xff0c;验证码是五个输入框#xf…前言
大家好我是没钱的君子下流坯用自己的话解释自己的知识。很久很更新了这几个月一直在加班今天记录一个uniapp关于input中focus()方法自动获取焦点的坑。
案例
为了实现一个手机验证码的页面验证码是五个输入框输入第一个输入框后焦点自动获取到下一个输入框的焦点如图所示
实现思路
我的思路是给每个输入框动态绑定一个ref实例去调用实例上的focus()方法我第一次的代码也是这样写的代码如下所示
templateview classcontainerview classotp-containerinputv-for(item, index) in otpLength:keyindextypetelmaxlength1inputonInput($event, index)focusonFocus(index):refinput-${index}classotp-input//viewbutton clicksubmitOTP提交/button/view
/templatescript
export default {data() {return {otpLength: 5, // 验证码的长度otpValues: [, , , , ], // 存储每个输入框的值activeIndex: null // 当前聚焦的输入框索引};},methods: {onInput(event, index) {const value event.target.value;this.$set(this.otpValues, index, value); // 更新对应输入框的值if (value index this.otpLength - 1) {this.$nextTick(() {this.focusNextInput(index 1); // 自动跳转到下一个输入框});}},onFocus(index) {this.activeIndex index; // 记录当前聚焦的输入框索引},focusNextInput(index) {console.log(Trying to focus input-${index});console.log(this.$refs:, this.$refs);const ref this.$refs[input-${index}];if (ref Array.isArray(ref) ref.length 0) {ref[0].focus(); // 确保引用存在再调用 focus 方法} else {console.error(Reference for input-${index} not found or invalid, ref);}},submitOTP() {const otp this.otpValues.join(); // 将所有输入框的值拼接成一个字符串console.log(提交的验证码:, otp); // 打印验证码// 这里可以添加提交验证码的逻辑}}
};
/script尝试方法1加判断排除DOM渲染
但是一直报错说 TypeError: this.$refs[input-.concat(...)][0].focus is not a function 我心想这怎么可能不是个函数难道未定义我就抓紧打印ref发现是有这个实例的当时就没多想又对代码进行了检查然后加了判断考虑可能是没获取到实例或者dom没渲染出来因为前面的input是通过v-for循环的所以进行了更全面的判断代码如下所示 focusNextInput(index) {console.log(Trying to focus input-${index});const ref this.$refs[input-${index}];this.$nextTick(() {// 检查 ref 是否存在if (Array.isArray(ref) ref.length 0 ref[0].focus) {ref[0].focus(); // 如果是数组形式使用 ref[0] 并调用 focus} else if (ref ref.focus) {ref.focus(); // 如果直接是 DOM 元素也调用 focus} else {console.error(Reference for input-${index} not found or invalid, ref);}});},尝试方法2查看ref实例用ref上的方法
发现报错还是TypeError: this.$refs[input-.concat(...)][0].focus is not a function我就懵逼了。发现不是代码的问题问题肯定是出现在了ref实例上我就仔细的看ref实例里面的所有方法如下图所示 发现里没有focus()我想这一次可算找到根本了一次解决直接换成_focus()方法发现是不报错了但是效果没有我又换成_onFocus()方法发现也是不报错但是效果没有。到此时为止没有任何思路。
尝试方法3通过uniapp自带获取dom节点
中午吃了饭以后我想为什么在uniapp中ref实例里面的方法不能用那我通过uniapp自带的获取dom节点然后通过dom再去控制焦点说干就干代码如下 focusNextInput(index) {console.log(Trying to focus input-${index});const ref this.$refs[input-${index}];if (ref ref.length 0) {// 使用微信小程序的API来设置焦点console.log(reg,sssssssssssss)this.$nextTick(() {uni.createSelectorQuery().in(this).select(#input-${index}).fields({ node: true }).exec((res) {res[0].node._onFocus(); // 使用 focus 方法设置焦点});});} else {console.error(Reference for input-${index} not found or invalid, ref);}},我把这段代码修改后发现使用focus()还不行_focus()方法_onFocus()方法也不行
解决办法
上面我是所能用的方法都用了这时候我想着看看官网吧发现uniapp有自带的获取焦点的方法只有用官网的方法才可以也就是input :focusfocusState blurdataExamine()/input这种我心想那直接控制:focus实现代码如下所示
templateview classcontainerview classotp-containerinputv-for(item, index) in otpLength:keyindextypetelv-modelotpValues[index]:focusactiveIndex indexmaxlength1inputonInput($event, index)focusonFocus(index):refinput-${index}:idinput-${index}classotp-input//viewbutton clicksubmitOTP提交/button/view
/templatescript
export default {data() {return {otpLength: 5, // 验证码的长度otpValues: [, , , , ], // 存储每个输入框的值activeIndex: null // 当前聚焦的输入框索引};},mounted() {// 页面加载完成时绑定 refsthis.$nextTick(() {console.log(Initial refs:, this.$refs);});},methods: {onInput(event, index) {const value event.target.value;console.log(event, index, value,1111111111111111111111111);this.$set(this.otpValues, index, value); // 更新对应输入框的值if (value index this.otpLength - 1) {this.$nextTick(() {this.focusNextInput(index 1); // 自动跳转到下一个输入框});}},onFocus(index) {this.activeIndex index; // 记录当前聚焦的输入框索引console.log(this.activeIndex);},focusNextInput(index) {console.log(Trying to focus input-${index});this.activeIndex index; // 设置指定输入框为焦点},submitOTP() {const otp this.otpValues.join(); // 将所有输入框的值拼接成一个字符串console.log(提交的验证码:, otp); // 打印验证码// 这里可以添加提交验证码的逻辑}}
};
/script到此这个效果算是完成了uniapp中有很多细节和vue上有偏差还是需要熟读文档。还是那句话代码代码千千万适合自己最重要。
