【uniapp】如何手动实现让input文本框聚焦

这篇具有很好参考价值的文章主要介绍了【uniapp】如何手动实现让input文本框聚焦。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

开发中遇到一个问题,希望在每次操作页面完成后,input文本框都能自动聚焦,那么问题来了,应该怎么做,接下来请继续往下看。

也许大多数同学都会这么做,尝试过修改文本框属性focustrue,但是没有效果,参考如下

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

尝试手动实现,调用focus事件,想到它可不像之前的h5项目,是没有操作dom的方法,所以暂时搁置,在网上找了解决方案都不合适

看来只有自己解决了,先理清一下思路,知道聚焦状态吧,如果直接设置属性focus一直为true好像不太对,尝试去设置状态更新,参考如下

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

发现了么,在input输入框组件上,设置属性focus变量isInputFocus可更新,然后添加一个属性方法onblur()

应该这样做,当输入框失去焦点后,需要调用一下方法,去更新一下状态,参考如下代码

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

当操作完成后,手动设置输入框聚焦,执行代码如下,难道不会想到可以这样用么!

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

uniapp聚焦事件,uniapp,uni-app,前端,输入框聚焦,vue,input文章来源地址https://www.toymoban.com/news/detail-520492.html

到了这里,关于【uniapp】如何手动实现让input文本框聚焦的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包