JS如何为表单聚焦控件设置醒目的样式
JS 如何 设置 控件 表单 样式 聚焦 醒目
2023-06-13 09:17:21 时间
前言
在用户填写表单时,为了让用户集中精力填写或某一个表单控件,可以通过设置此空间的样式来达到目的
那这样的效果如何实现呢,如下示例所示的
示例展示
(https://coder.itclan.cn/fontend/js/26-set-form-style/)
原生Js实现
如下是简易的示例代码,要想实现这一个效果,必须要知道onfocus
和onblur
,前者是聚焦的回调事件,而后者是控件失去焦点的回调
在一个网页里,永远都只能有一个控件获得焦点,因此需要遍历所有的控件,为它们定义相同的onfocus
以及onblur
的逻辑
当控件获得焦点时,为它设置独特的边框样式,否则就恢复原有的边框样式
function init() {
var f = document.form[0]; // 获取表单DOM
var elements = f.elements; // 获取所有的控件数组
var str = ''; // 拼接字符串
// 循环遍历
for(var i = 0;i<elements.length;i++) {
var e = elements[i]; // 当前的控件
e.onfocus = function() { // 定义聚焦的样式回调
// 修改边框的红色
this.style.border = '1px solid red';
}
e.onblur = function() { // 失去焦点的回调
this.style.border = ''; // 恢复原有边框样式
}
}
}
init();
如下是html
模板代码
<form>
年份
<select name="myyear">
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
</select><br />
<input type="button" value="提交" onclick="showParams()">
</form>
Vue版本实现
在vue
里面是直接在元素上绑定focus
与blur
事件进行实现的,如下代码所示
<template>
<div class="wrap">
<el-form
status-icon
label-width="100px"
>
<el-form-item>
名字:
<input type="text"
v-model="name"
autocomplete="off"
placeholder="请输入名字"
@blur="handleInput('blur')"
@focus="handleInput('focus')"
:style="style" />
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "formStyle",
data() {
return {
name: '',
style: {
border: "1px solid #ccc"
}
}
},
methods: {
handleInput(type) {
if(type == 'blur') {
this.style.border = '1px solid #ccc';
}else {
this.style.border = '1px solid red';
}
}
}
};
</script>
<style lang="scss" scoped>
.wrap {
text-align: center;
margin: 20px 0 20px 0;
}
</style>
总结
无论是原生js
还是Vue
版本实现,都需要使用onblur
(input
框失去焦点)与onfocus
(input
框聚焦焦点),实现的核心原理都是相似的,只是在框架里去控制,表现形式有些不一样
相关文章
- js中如何判断数组中包含某个特定的值_js数组是否包含某个值
- 不用React Vue,只用原生JS,如何开发单页面应用?
- 【说站】js中for-of语句如何理解
- 利用Jquery Lazyload JS插件实现网页图片延迟加载
- JS对象转数组_js怎么把数组转成对象
- js如何实现随机数的切换
- 如何使用Node.js连接数据库
- 如何使用jscythe并通过Node.js的Inspector机制执行任意JS代码
- js控制页面定时跳转详解编程语言
- js实现路由跳转详解编程语言
- JS document(文档节点)详解
- JS isNaN()函数的用法
- JS截取数组:使用splice()和slice()方法
- 使用JS技术实现Oracle数据库链接(js 链接 oracle)
- JS实时链接Oracle让数据库访问更便捷(js实时连接oracle)
- JS将文件传输至MySQL数据库(.js传文件至mysql)
- JS获取IUSR_机器名和IWAM_机器名帐号的密码
- 用js做一个小游戏平台(一)
- js常用代码段整理
- js遍历、动态的添加数据的小例子
- js中如何把字符串转化为对象、数组示例代码
- 在js文件中写el表达式取不到值的原因及解决方法
- JS删除字符串最后一个字符的实现代码
- css+js实现部分区域高亮可编辑遮罩层
- 纯js实现遮罩层效果原理分析
- js实现飞入星星特效代码
- node.js中的querystring.escape方法使用说明