[uniapp] How to manually focus the input text box

I encountered a problem during the development. I hope that the input text box can be automatically focused after each operation page is completed. Then the problem comes, what should I do, please continue to read down.

Perhaps most of the students will do this. They have tried to modify the properties of the text box focus, truebut it has no effect. The reference is as follows

<template>
	<view class="content">
		<!-- 此处省略... -->
		<view class="expand">
			<input class="input" type="text" v-model="value" focus="true"/>
		</view>
		<!-- 此处省略... -->
	</view>
</template>

Try to implement it manually, call the focus event, think that it is not like the previous h5 project, there is no way to manipulate the dom, so put it aside for the time being, and find a solution on the Internet is not suitable

It seems that I can only solve it by myself. Let me clarify my thinking first and know the focus status. If it seems wrong to directly set the property focusto always be , try to set the status update. Refer to the followingtrue

<template>
	<view class="content">
		<!-- 此处省略... -->
		<view class="expand">
			<input class="input" type="text" v-model="value" :focus="isInputFocus" @blur="onblur"/>
		</view>
		<!-- 此处省略... -->
	</view>
</template>

Have you found it? On the input input box component, set the attribute focusvariable isInputFocusto be updatable, and then add an attribute methodonblur()

This should be done. When the input box loses focus, you need to call a method to update the state. Refer to the following code

export default {
    
    
		data() {
    
    
			return {
    
    
				//...
				value:'',
				isInputFocus:true,
			};
		},
		methods:{
    
    
			onblur(){
    
    
				this.isInputFocus=false;
			},
			//...
		}
	}

When the operation is completed, manually set the focus of the input box and execute the code as follows. Don't you think it can be used like this!

this.$nextTick(()=>{
    
    
	this.value='';
	this.isInputFocus=true;
})