JS如何为表单聚焦控件设置醒目的样式

前言

在用户填写表单时,为了让用户集中精力填写或某一个表单控件,可以通过设置此空间的样式来达到目的

那这样的效果如何实现呢,如下示例所示的

示例展示

点击文末左下角阅读原文即可(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如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果

2023-01-30

VueJs中如何使用Teleport组件

2023-01-22

VueJs中如何使用provide与inject

2023-01-21

VueJs中customRef函数的使用

2023-01-20

vueJs中toRaw与markRaw函数的使用比较

2023-01-19

点击左下角查看更多