按钮默认获取鼠标焦点汇总,css方法js方法,UI方法和我发现的万能方法_el-button autofocus

作者：我家小花儿 | 2024-05-30 16:06:05

踩

el-button autofocus

方法有很多 JS-CSS 如果有用elementUI或者其他UI等等等,还有内置的方法!但有一个简单且万能的办法

<el-button ID="areaButton" autofocus  @click="areaMethod">行政区</el-button>
1

满足需求:默认选中行政区按钮,点击月份按钮,行政区按钮失去焦点!
在这里插入图片描述

UI内嵌方法

这种办法不能满足需求,所以才一直想办法,找到上述万能办法

1
2

需求:默认选中行政区按钮,点击月份按钮,行政区按钮失去焦点
实际:默认选中行政区按钮,点击月份按钮,行政区按钮不失去焦点
如下
在这里插入图片描述

需求有多苛刻,技术就要了解的多全面!

还有其他办法,一块记录下来!
一、格式

<body οnlοad=document.formname.textname.focus()> 
1

formname为表单名称，后面接着的textname 是文本框的名称。
1

示例：

<html>

<head></head> 
/************这儿这儿这儿这儿这儿这儿*****************************/
<body onLoad="document.user.username.focus()" > 

<form name="user" action="">

<input type="text" name="username"> 

</form>

</body> 

</html> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这个方法比较简单，推荐使用。

二、使用JavaScript，相对麻烦

<html> 

<head></head> 

<body > 

<input type="text" id="name"> 
<!--设置文本输入框的id为name--> 

<script language="javascript"> 

document.getElementById('name').focus();  

<!--设置id为name的元素得到焦点-->

</script> 

</body> 

</html> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

按钮默认获取鼠标焦点汇总,欢迎留言交流!

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/647675