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

相关文章

  • 关于js的事件循环机制剖析

    关于js的事件循环机制剖析

    JS事件循环机制,最常用到的地方应该是做面试题,经常给出一段代码,让你写出console.log()顺序,下面这篇文章主要给大家介绍了关于js事件循环机制的相关资料,需要的朋友可以参考下
    2021-06-06
  • 微信小程序实现滑动删除

    微信小程序实现滑动删除

    这篇文章主要为大家详细介绍了微信小程序实现滑动删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • Javascript中For In语句用法实例

    Javascript中For In语句用法实例

    这篇文章主要介绍了Javascript中For In语句用法,实例分析了javascript使用For In语句遍历数组的技巧,需要的朋友可以参考下
    2015-05-05
  • 不得不知的ES6小技巧

    不得不知的ES6小技巧

    ES6出来已经有好几年了,同时很多新特性可以被巧妙地运用在项目中。我想要列下其中一些,希望它们对你有用
    2018-07-07
  • 如何轻松在JavaScript中字符串的字符之间添加空格

    如何轻松在JavaScript中字符串的字符之间添加空格

    在前端开发的过程中,我们经常会遇到需要对于输入的字符串进行格式化处理,下面这篇文章主要给大家介绍了关于如何轻松在JavaScript中字符串的字符之间添加空格的相关资料,需要的朋友可以参考下
    2023-03-03
  • javascript中的previousSibling和nextSibling的正确用法

    javascript中的previousSibling和nextSibling的正确用法

    这篇文章主要介绍了javascript中的previousSibling和nextSibling的正确用法的相关资料,需要的朋友可以参考下
    2015-09-09
  • javascript中字符串处理常用的方法汇总

    javascript中字符串处理常用的方法汇总

    JavaScript中操作字符串是一个很重要的话题,下面这篇文章主要给大家介绍了关于javascript中字符串处理常用的方法,文中通过图文以及代码示例介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • layui checkbox默认选中,获取选中值,清空所有选中项的例子

    layui checkbox默认选中,获取选中值,清空所有选中项的例子

    今天小编就为大家分享一篇layui checkbox默认选中,获取选中值,清空所有选中项的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript插件化开发教程 (一)

    JavaScript插件化开发教程 (一)

    这篇文章主要介绍了JavaScript插件化开发教程,十分的详细,
    2015-01-01
  • 微信小程序开发之全局配置与页面配置实现

    微信小程序开发之全局配置与页面配置实现

    本文主要介绍了微信小程序开发之全局配置与页面配置实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07

最新评论