脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → uniapp让input文本框聚焦

uniapp如何手动实现让input文本框聚焦效果

 更新时间：2023年12月05日 11:44:02   作者：TA远方  
最近使用uniapp做一个评论的功能,遇到一个需求就是点击上面的评论图标,让定位在底部的input框聚焦,下面这篇文章主要给大家介绍了关于uniapp如何手动实现让input文本框聚焦效果的相关资料,需要的朋友可以参考下

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

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

<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 input自动聚焦

input标签有一个属性focus：获取焦点。默认值false

<input :focus="firstFocus" type="text" value="" placeholder="请输入药品名称" />

初始化firstFocus为false

export default {
    data() {
        return {
            firstFocus:false,
        }
    },
}

在onload中修改焦点值

onLoad(options) {
    var that = this;
    that.firstFocus = false;
    setTimeout(function(){
        that.firstFocus = true;
    },500)
}

总结

到此这篇关于uniapp如何手动实现让input文本框聚焦效果的文章就介绍到这了,更多相关uniapp让input文本框聚焦内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论