前言
在用户填写表单时,为了让用户集中精力填写或某一个表单控件,可以通过设置此空间的样式来达到目的
那这样的效果如何实现呢,如下示例所示的
示例展示
(https://coder.itclan.cn/fontend.../js/26-set-form-style/)
原生Js实现
如下是简易的示例代码,要想实现这一个效果,必须要知道onfocus和onblur,前者是聚焦的回调事件,而后者是控件失去焦点的回调
在一个网页里...,永远都只能有一个控件获得焦点,因此需要遍历所有的控件,为它们定义相同的onfocus以及onblur的逻辑
当控件获得焦点时,为它设置独特的边框样式,否则就恢复原有的边框样式
function init...// 拼接字符串
// 循环遍历
for(var i = 0;i<elements.length;i++) {
var e = elements[i]; // 当前的控件...e.onfocus = function() { // 定义聚焦的样式回调
// 修改边框的红色
this.style.border =