uni-app:实现文本框的自动换行
一、实现效果
文本框回车实现就会执行自动调到下一个文本框
二、 单页面使用
适用于使用页面较少的情况，在页面内部直接写入回车事件
1、定义变量-控制当前光标所在位置
currentFocus是一个“状态变量”，表示 当前哪个输入框应该获得焦点
2、初始化时给一个默认值
刚进入页面，设置为0，表明光标应该在索引为0的位置，也就是会设置的第一个文本框位置
3、视图层
@confirm="handleEnter(1)"—— 执行回车事件，执行回车会自动调到索引为1的位置(为null表明不会跳转到下一个):focus="currentFocus === 0"—— 如果当前的变量为0，表明focus的值为true，那么对应的文本框就会自动获得焦点并弹出键盘
4、回车事件
当你在 第一个输入框 按下回车（软键盘“确认”）：
- 触发
@confirm="handleEnter(1)" - 调用
handleEnter(1)，nextIndex = 1 this.currentFocus = 1← 更新状态
- 触发
Vue 响应式系统检测到
currentFocus变为1- 自动重新计算所有
:focus表达式 - 第一个输入框：
:focus="currentFocus === 0"→false - 第二个输入框：
:focus="currentFocus === 1"→true - 第二个输入框获得焦点，光标跳转成功！
- 自动重新计算所有
当你在 最后一个输入框 按回车：
@confirm="handleEnter(null)"
nextIndex = null- 条件
if (nextIndex !== null ...)不成立 - 执行
else分支：uni.hideKeyboard()→ 收起键盘
handleEnter(nextIndex) {if (nextIndex !== null && nextIndex !== undefined) {this.currentFocus = nextIndex} else {uni.hideKeyboard()}
},
5、完整代码
<template><view><view class="item"><span>文本框1:</span><input type="text" placeholder="请输入" v-model="text1" @confirm="handleEnter(1)" :focus="currentFocus === 0"></view><view class="item"><span>文本框2:</span><input type="number" placeholder="请输入" v-model="text2" @confirm="handleEnter(2)" :focus="currentFocus === 1"></view><view class="item"><span>文本框3:</span><input type="number" placeholder="请输入" v-model="text3" @confirm="handleEnter(3)":focus="currentFocus === 2"></view><view class="item"><span>文本框4:</span><input type="number" placeholder="请输入" v-model="text4" @confirm="handleEnter(null)":focus="currentFocus === 3"></view></view>
</template><script>export default {data() {return {text1: '', //文本1text2: '', //文本2text3: '', //文本3text4: '', //文本4currentFocus: 0 // 自动换行-数字索引};},methods: {handleEnter(nextIndex) {if (nextIndex !== null && nextIndex !== undefined) {this.currentFocus = nextIndex} else {uni.hideKeyboard()}},},onLoad() {this.currentFocus = 0}};
</script><style>.item{margin-top:20px;}input{border:1px solid #7ec3ff;padding:5px 0;}
</style>二、适合多页面使用
通过倒挂到全局方法中，满足多页面使用情况
1、全局方法
(1)全局倒挂
在全局方法中写入
import App from './App'//回车换行事件
Vue.prototype.$handleEnter = function(nextIndex) {if (nextIndex !== null && nextIndex !== undefined) {this.currentFocus = nextIndex;} else {uni.hideKeyboard();}
};// 添加 checkPermission 方法到 Vue.prototype 上,检查权限
Vue.prototype.$checkPermission = function(username) {return new Promise((resolve, reject) => {uni.request({url: getApp().globalData.position + 'Xcxuser/checkpermission',header: {"Content-Type": "application/x-www-form-urlencoded"},method: 'POST',dataType: 'json',data: {username: username,},success: res => {console.log('Server Response:', res);resolve(res);},fail: err => {console.log(err);reject(err);}});});
};// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({...App
})app.$mount()
// #endif// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)return {app}
}
// #endif(2)全局混入
在全局方法中写入
// 全局混入
Vue.mixin({methods: {/*** 处理回车键事件，自动切换焦点或隐藏键盘* @param {number|null} nextIndex - 下一个要聚焦的输入框索引，null表示隐藏键盘*/$handleEnter(nextIndex) {if (nextIndex !== null && nextIndex !== undefined) {this.currentFocus = nextIndex;} else {uni.hideKeyboard();}}}
});2、界面修改
直接使用全局的方法$handleEnter
<template><view><view class="item"><span>文本框1:</span><input type="text" placeholder="请输入" v-model="text1" @confirm="$handleEnter(1)":focus="currentFocus === 0"></view><view class="item"><span>文本框2:</span><input type="number" placeholder="请输入" v-model="text2" @confirm="$handleEnter(2)":focus="currentFocus === 1"></view><view class="item"><span>文本框3:</span><input type="number" placeholder="请输入" v-model="text3" @confirm="$handleEnter(3)":focus="currentFocus === 2"></view><view class="item"><span>文本框4:</span><input type="number" placeholder="请输入" v-model="text4" @confirm="$handleEnter(null)":focus="currentFocus === 3"></view></view>
</template><script>export default {data() {return {text1: '',text2: '',text3: '',text4: '',currentFocus: 0};},onLoad() {this.currentFocus = 0;}};
</script><style>.item {margin-top: 20px;}input {border: 1px solid #7ec3ff;padding: 5px 0;}
</style>