input自动获取焦点

news2024/11/22 13:26:14

一、遇到的问题

点击一个弹窗,弹窗里的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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2245342.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【论文速读】| RobustKV:通过键值对驱逐防御大语言模型免受越狱攻击

基本信息 原文标题&#xff1a;ROBUSTKV: DEFENDING LARGE LANGUAGE MODELS AGAINST JAILBREAK ATTACKS VIA KV EVICTION 原文作者&#xff1a;Tanqiu Jiang, Zian Wang, Jiacheng Liang, Changjiang Li, Yuhui Wang, Ting Wang 作者单位&#xff1a;Stony Brook University…

css使用弹性盒,让每个子元素平均等分父元素的4/1大小

css使用弹性盒&#xff0c;让每个子元素平均等分父元素的4/1大小 原本&#xff1a; ul {padding: 0;width: 100%;background-color: rgb(74, 80, 62);display: flex;justify-content: space-between;flex-wrap: wrap;li {/* 每个占4/1 */overflow: hidden;background-color: r…

图像处理 之 凸包和最小外围轮廓生成

“ 最小包围轮廓之美” 一起来欣赏图形之美~ 1.原始图片 男人牵着机器狗 2.轮廓提取 轮廓提取 3.最小包围轮廓 最小包围轮廓 4.凸包 凸包 5.凸包和最小包围轮廓的合照 凸包和最小包围轮廓的合照 上述图片中凸包、最小外围轮廓效果为作者实现算法生成。 图形几何之美系列&#…

徒手从零搭建一套ELK日志平台

徒手从零搭建一套ELK日志平台 日志分析的概述日志分析的作用主要收集工具集中式日志系统主要特点采集日志分类ELK概述初级版ELK终极版ELK高级版ELKELK收集日志的两种形式 搭建ELK平台Logstash工作原理Logstash核心概念环境准备安装部署docker添加镜像加速器安装部署Elasticsear…

【论文阅读】Poison Forensics: Traceback of Data Poisoning Attacks in Neural Networks

Poison Forensics: Traceback of Data Poisoning Attacks in Neural Networks 核心原理前提条件方法第一个问题第二个问题 核心原理 有毒样本会使模型更接近参数空间中的最佳位置&#xff0c;良性样本会使该模型向其随机初始化状态移动 前提条件 最重要的&#xff1a; 可以…

递归算法专题一>反转链表

题目&#xff1a; 解析&#xff1a; 也可以把链表看作一棵树&#xff0c;后续遍历这棵树然后和上图一样&#xff0c;改变指针即可 代码&#xff1a; public ListNode reverseList(ListNode head) {if(head null || head.next null) return head;ListNode newHead revers…

拼音。。。。。。。。。。

拼音。文心一言、文心大模型3.5&#xff0c;竟然说错了&#xff0c;如下图。所以&#xff0c;以后都不想在文心一言搜拼音了。。以后搜拼音&#xff0c;还是在百度一下直接搜&#xff0c;搜到的顶头第一条也是AI智能回答&#xff0c;可能比文心一言更加好更加准 正确的说法是&…

K8S资源限制之LimitRange

LimitRange介绍 LimitRange也是一种资源&#xff0c;在名称空间内有效&#xff1b;限制同一个名称空间下pod容器的申请资源的最大值&#xff0c;最小值pod的resources中requests和limits必须在这个范围内&#xff0c;否则pod无法创建。当然pod也可以不使用resources进行创建ty…

【爬虫】Firecrawl对京东热卖网信息爬取(仅供学习)

项目地址 GitHub - mendableai/firecrawl: &#x1f525; Turn entire websites into LLM-ready markdown or structured data. Scrape, crawl and extract with a single API. Firecrawl更多是使用在LLM大模型知识库的构建&#xff0c;是大模型数据准备中的一环&#xff08;在…

JavaParser如何获取方法的返回类型

使用JavaParser 如何获取一个Java类中的某个方法的返回类型呢&#xff1f; 假如有一个如下的简单的Java 类&#xff1a; /*** Copyright (C) Oscar Chen(XM):* * Date: 2024-11-21* Author: XM*/ package com.osxm.ai.sdlc.codeparse.codesample;public class MyClass {public…

25.UE5时间膨胀,慢动作,切换地图,刷BOSS

2-27 时间膨胀、慢动作、切换地图、刷BOSS_哔哩哔哩_bilibili 目录 1.刷新BOSS逻辑 2.时间膨胀实现慢动作 3.胜利画面&#xff0c;下一关 3.1胜利画面UI 3.2第一关、第二关游戏模式 3.3下一关按钮事件的绑定 1.刷新BOSS逻辑 实现当场上的怪物都死亡后&#xff0c;进行刷…

【大语言模型】ACL2024论文-19 SportsMetrics: 融合文本和数值数据以理解大型语言模型中的信息融合

【大语言模型】ACL2024论文-19 SportsMetrics: 融合文本和数值数据以理解大型语言模型中的信息融合 https://arxiv.org/pdf/2402.10979 目录 文章目录 【大语言模型】ACL2024论文-19 SportsMetrics: 融合文本和数值数据以理解大型语言模型中的信息融合目录摘要研究背景问题与挑…

数字IC后端设计实现之Innovus place报错案例 (IMPSP-9099,9100三种解决方案)

最近吾爱IC社区星球会员问到跑place_opt_design时会报错退出的情况。小编今天把这个错误解决办法分享给大家。主要分享三个方法&#xff0c;大家可以根据自己的实际情况来选择。 数字IC后端低功耗设计实现案例分享(3个power domain&#xff0c;2个voltage domain) **ERROR: (I…

弧形导轨有什么优势及局限?

弧形导轨的设计允许负载沿着特定的曲线路径移动&#xff0c;这在许多自动化设备中是非常必要的。它具有高强度、刚性和稳定性&#xff0c;能够承受较大的负载和冲击力&#xff0c;并且在高速运动下仍能保持稳定&#xff0c;这使得弧形导轨在需要处理重型负载或进行高速运动的场…

【天壤智能-注册安全分析报告-无验证纯IP限制存在误拦截隐患】

前言 由于网站注册入口容易被机器执行自动化程序攻击&#xff0c;存在如下风险&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露&#xff0c;不符合国家等级保护的要求。短信盗刷带来的拒绝服务风险 &#xff0c;造成用户无法登陆、注册&#xff0c;大量收到垃圾短信的…

Linux13 传输层UDP和TCP协议

传输层UDP和TCP协议 1. UDP 协议1.1 UDP协议端格式1.2 UDP特点1.3 UDP 的缓冲区1.4 UDP数据长度1.5 基于 UDP 的应用层协议 2. TCP 协议TCP协议端格式确认应答序号和确认序号位通信机制&#xff1a; 超时重传连接管理三次握手 - 建立连接三次握手与TCPSocket问题 - 为什么要有三…

Figure 02迎重大升级!!人形机器人独角兽[Figure AI]商业化加速

11月19日知名人形机器人独角兽公司【Figure AI】发布公司汽车巨头【宝马】最新合作进展&#xff0c;旗下人形机器人Figure 02在生产线上的性能得到了显著提升&#xff0c;机器人组成自主舰队&#xff0c;依托端到端技术&#xff0c;速度提高了400%&#xff0c;执行任务成功率提…

OpenCV 图片处理与绘制

目录 1. 图片处理 1.1 灰度处理 1.1.1 图像灰度化处理 1.1.2 图像灰度化的算法 1.2 图像二值化 1.3 边缘检测 ​编辑 2. 绘图 2.1 绘制线段 2.2 绘制矩形 2.3 绘制圆形 2.4 绘制椭圆 2.5 绘制多边形 2.6 绘制文字图片 1. 图片处理 1.1 灰度处理 将彩色图像转化为…

uniapp 城市选择插件

uniapp城市选择插件 如上图 地址 完整demo <template><view><city-selectcityClick"cityClick":formatName"formatName":activeCity"activeCity":hotCity"hotCity":obtainCitys"obtainCitys":isSearch&quo…

实验室资源调度系统:基于Spring Boot的创新

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…