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文本框聚焦内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript parseInt() 函数的进制转换注意细节

    javascript parseInt() 函数的进制转换注意细节

    parseInt(string, radix) 有2个参数,第一个string 是传入的数值,第二个radix是 传入数值的进制,参数radix 可以忽略,默认为 10,各种进制的数转换为 十进制整数,接下来详细介绍,感兴趣的朋友可以了解下哦
    2013-01-01
  • Vue elementUI实现免密登陆与号码绑定功能

    Vue elementUI实现免密登陆与号码绑定功能

    这篇文章主要介绍了Vue elementUI实现免密登陆与号码绑定功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-11-11
  • 浅谈如何优雅处理JavaScript异步错误

    浅谈如何优雅处理JavaScript异步错误

    这篇文章主要介绍了浅谈如何优雅处理JavaScript异步错误,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • js实现拖拽元素选择和删除

    js实现拖拽元素选择和删除

    这篇文章主要为大家详细介绍了js实现拖拽元素选择和删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • js模拟滤镜的图片渐显效果

    js模拟滤镜的图片渐显效果

    js模拟滤镜的图片渐显效果...
    2007-02-02
  • JavaScript中变量提升和函数提升实例详解

    JavaScript中变量提升和函数提升实例详解

    这篇文章主要给大家介绍了关于JavaScript中变量提升和函数提升的相关资料,以及JS变量提升和函数提升的顺序,文中给出了详细的介绍,需要的朋友可以参考下
    2021-07-07
  • JavaScript九九乘法口诀表的简单实现

    JavaScript九九乘法口诀表的简单实现

    这篇文章主要介绍了JavaScript乘法口诀表的简单实现,文中给出了详细的示例代码,这样对大家的理解和学习更有帮助,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-10-10
  • javascript 函数限制调用代码

    javascript 函数限制调用代码

    javascript 函数限制调用代码,需要的朋友可以参考下。
    2010-05-05
  • 详谈JavaScript内存泄漏

    详谈JavaScript内存泄漏

    文章从什么是闭包、以及闭包所涉及的作用域链说起,讲述了JavaScript垃圾回收机制、循环引用、循环引用和闭包、IE中的内存泄漏以及解决方法,是篇非常详尽,非常不错的文章,这里推荐给大家。
    2014-11-11
  • js实现的常用的左侧导航效果

    js实现的常用的左侧导航效果

    使用js简单实现下常用的左侧导航效果为提高导航性能而生,各位朋友可以参考应用,希望对大家有所帮助
    2013-10-10

最新评论