input自动获取焦点

一、遇到的问题

点击一个弹窗，弹窗里的input自动聚焦

二、实现方式

1、使用的是tdesign的t-input，查看官方文档，设置autofocus属性就可以自动聚焦；

这个方式页面初始加载的input是有效的，但是此处是弹窗里的input，是后面动态加载出来的，autofocus未生效

2、使用ref的方式实现，最开始一直没生效，打印inputRef也是null，最后发现要等dom元素加载完再调用focus就成功了，这里setTimeout实现了，也可以使用nextTick

 <t-input borderless clearable class="seatch_input" v-model="search_value"
                                placeholder="输入职位名称" autofocus @change="onSearch" ref="inputRef" />

        const inputRef = ref(null);
        const onSelect = (e) => {
            console.log('onSelect')
            setTimeout(() => {
                inputRef?.value.focus();
            }, 300);
        };

nextTick(() => {
    if (inputRef.value) {
      inputRef.value.focus();
    }
  });

三、uview-plus里input自动聚焦

官方文档:focus="!0"即可

 <up-search height="60rpx" shape="round" searchIconSize="40rpx" placeholder="输入职位名称" bgColor="#F6F6F6"
            :showAction="false" @change="searchJobTitle" v-model="jobFilterKeyword"  :focus="!0"></up-search>

原文地址：https://blog.csdn.net/u010865136/article/details/143953383

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！