Layui弹框中设置输入框自动获取焦点无效/Layui设置Input框自动获取焦点无效,怎么办?

1、问题概述?

有时候为了用户体验,期望当弹框打开的时候,指定的输入框能自动的获取焦点,用户就可以直接输入了。提升了用户体验。但有时候设置的时候没有效果。

2、正常的设置自动获取焦点方式

【input框设置方式】

使用关键字autofocus

<input type="text"  required lay-verify="required"  id="test"  placeholder="请输入内容" autocomplete="off" class="layui-input" autofocus>

【弹框设置】

在弹框的最后,需要刷新form表单

//刷新form表单的input组件
form.render("input");
//刷新form表单--刷新全部
form.render();

3、如果没有效果,你不妨换个思路

Layui的本质还是JavaScript,我们完全可以使用JS代码或者jQuery实现让输入框自动获取焦点焦点。

【通过JavaScript设置输入框获取焦点】

需要注意的是,设置之后,依旧需要刷新form表单。

//设置焦点自动获取
document.getElementById('test').focus();
//刷新form表单--刷新

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

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

相关文章

Zemax中FFT PSF和惠更斯PSF的区别?

在Zemax“分析”选项卡中&#xff0c;有PSF&#xff08;“点扩散函数”&#xff09;图&#xff0c;主要包括如下两种计算方式&#xff1a; 1. FFT PSF&#xff0c;快速傅里叶变换&#xff08;fast fourier transform&#xff0c;FFT&#xff09; 该方法可以看做是以下点扩散函…

心链14-----项目功能完善补坑+自动跳转登录页 + 重复加入队伍问题(分布式锁) 并发请求问题解决 + 项目部署上线

心链 — 伙伴匹配系统 一、todo 1、强制登录&#xff0c;自动跳转到登录页 解决&#xff1a;axios 全局配置响应拦截、并且添加重定向 1.在myAxios里配置响应拦截 这里我们要改变history 模式的实现&#xff0c;在main.ts里修改 当登录成功后&#xff0c;重定向到个人用户页…

Cyber Weekly #10

赛博新闻 1、最强开源大模型面世&#xff1a;阿里发布Qwen2 6月7日凌晨&#xff0c;阿里巴巴通义千问团队发布了Qwen2系列开源模型。该系列模型包括5个尺寸的预训练和指令微调模型&#xff1a;Qwen2-0.5B、Qwen2-1.5B、Qwen2-7B、Qwen2-57B-A14B以及Qwen2-72B。据Qwen官方博客…

Vitis HLS 学习笔记--循环边界包含变量

目录 1. 简介 2. 分析与详解 2.1 未优化 2.2 LOOP_TRIPCOUNT 优化指令 2.3 重写变量循环边界 3. 总结 1. 简介 在硬件设计中&#xff0c;循环的迭代次数通常需要是固定的&#xff0c;因为这有助于资源的预分配和时序分析。 循环边界包含变量意味着循环的迭代次数不是固…

Java进阶_抽象类与方法

抽象类概念 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘的&#xff0c;但是反过来&#xff0c;并不是所有的类都是用来描绘对象的&#xff0c;如果一个类中没有包含足够的信息来描绘一个具体的对象&#xff0c;这样的类就是抽象类。 抽象类除了不能实例化对象之…

按键精灵安装有乱码并且不能启动的解决办法

在国外购了电脑&#xff0c;系统是英文版 Windows 11&#xff0c;按键精灵死活都装不上去&#xff0c;打开exe的安装文件后出现乱码&#xff0c;安装完了后还是乱码&#xff0c;并且启动不了&#xff0c;以下是解决办法&#xff1a; 进入控制面板&#xff0c;并且点 Region&am…

汇编:结构体

在32位汇编中&#xff0c;结构体&#xff08;structures&#xff09;用于组织和管理复杂的数据类型&#xff0c;结构体可以包含多个不同类型的数据项&#xff08;成员&#xff09;&#xff1b;在MASM&#xff08;Microsoft Macro Assembler&#xff09;中&#xff0c;使用结构体…

CentOS安装Node.js以及JSDOM跳坑记

笔者在一台 CentOS 7.9 的服务器上使用常规的安装命令&#xff1a;sudo yum install node 来安装 Node.js&#xff0c;到最后系统提示&#xff1a; Error: Package: 2:nodejs-20.14.0-1nodesource.x86_64 (nodesource-nodejs) Requires: libstdc.so.6(GLIBCXX_3.4.20)(64bit) …

VUE + nodejs实战

BVDN搭建 D: cd nodejs ::npm install bootstrap ::npm install jquery ::npm install popper.js ::npm install vue npm install vue-router pauseapp.html <!DOCTYPE html> <!DOCTYPE html> <html> <head><!--bootstrap--><link rel"…

MySQL 5.7详细下载安装配置教程(MySQL 5.7安装包)_mysql5.7的安装教程

记录MySQL 5.7 的下载安装教程&#xff0c;并提供了Mysql 安装包 &#xff0c;以下是详细下载安装过程。 一、下载Mysql安装包 网盘下载&#xff1a; 下载MySQL 5.7安装包&#xff0c;网盘下载地址&#xff1a;点击此处直接下载 官网下载&#xff1a; 进入官网&#xff0c…

【设计模式】行为型设计模式之 迭代器模式

介绍 迭代器模式&#xff08;Iterator Pattern&#xff09; 是行为设计模式之一&#xff0c;它提供了一种访问集合对象&#xff08;如列表、数组或其他集合结构&#xff09;中元素的方式&#xff0c;而不需要暴露集合的内部结构。迭代器模式定义了一个迭代器接口&#xff0c;该…

K8S - 用kubectl远程访问内网的k8s集群

在之前的文章 K8S - 在任意node里执行kubectl 命令 介绍过&#xff0c; 通过任何node 的主机&#xff0c; 用kubectl 管理集群是很简单 无非就是两个步骤: 下载 k8s master 上的admin.conf在当前主机配置 K8SCONFIG 环境变量指向 下载的config file 其他内网主机也适用 其…

打字侠是一款PWA网站,如何下载到电脑桌面?

嘿&#xff0c;亲爱的键盘侠们&#xff01; 你是否还在为寻找一款好用的打字练习工具而烦恼&#xff1f;别担心&#xff0c;今天我要给大家介绍一位超级英雄——打字侠&#xff01;它不仅是一个超级酷的打字练习网站&#xff0c;还是一款PWA&#xff08;渐进式网页应用&#x…

链路聚合LACP

#交换设备 链路聚合 理解链路聚合配置&#xff08;LACP) 什么是LACP LACP&#xff08;Link Aggregation Control Protocol&#xff0c;链路聚合控制协议&#xff09;是一种基于IEEE802.3ad标准的实现链路动态聚合与解聚合的协议&#xff0c;它是链路聚合中常用的一种协议。…

WEB-Wordlist-Generator:为扫描后的Web应用生成相关联的字典

关于WEB-Wordlist-Generator WEB-Wordlist-Generator是一款功能强大的字典生成工具&#xff0c;该工具旨在帮助广大研究人员扫描目标Web应用程序并生成与之相关联的字典文件&#xff0c;从而允许我们对相关的网络威胁行为执行预备性应对策略。 功能介绍 当前版本的WEB-Wordli…

微服务之远程调用

常见的远程调用方式 RPC&#xff1a;Remote Produce Call远程过程调用&#xff0c;类似的还有 。自定义数据格式&#xff0c;基于原生TCP通信&#xff0c;速度快&#xff0c;效率高。早期的webservice&#xff0c;现在热门的dubbo &#xff08;12不再维护、17年维护权交给apac…

R语言统计分析——数据集概念和数据结构

参考资料&#xff1a;R语言实战.第2版 1、数据集的概念 数据集通常是由数据构成的一个矩形数组&#xff0c;行表示观测&#xff0c;列表示变量。 不同行业对于数据集的行和列叫法不同。统计学称为观测&#xff08;observation&#xff09;和变量&#xff08;variable&#xff…

动态规划(多重背包+完全背包)

P2851 [USACO06DEC] 最少的硬币 G 题解&#xff1a;从题目上看到那个有n种不同的货币&#xff0c;对于买家来说每个货币有C[ i ]个&#xff0c;是有限个数的&#xff0c;但是对于卖家来说 每个货币都是无限的&#xff0c;题目中要我们求的是买到这个物品的最小交易的货币数&…

[Vue-常见错误]浏览器显示Uncaught runtime errors

文章目录 错误描述正确写法具体如下 错误描述 当前端代码发生错误时&#xff0c;浏览器中出现以下错误提示。 正确写法 显然这不是我们所期望的&#xff0c;在vue.config.js中配置如下设置关闭Uncaught runtime errors显示 devServer: {client: {overlay: false}具体如下 …

Nvidia的成功与竞争:CEO黄仁勋的自信与挑战

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…