jQuery对输入表单的javascript效果

我试图复制我在表单网页上看到的效果

当用户单击输入字段以插入文本时

占位符标签移动到顶部

底线边框用动画高亮显示

就像你在这里看到的，但有棱角：

我认为这提供了非常清晰和有效的用户体验，尤其是在长表单上

---

你知道jquery是否有一个插件可以创建这样的效果吗？

这里有一个类似的解决方案，只使用

css

，希望能有所帮助

input:focus~标签，
输入：有效~标签
{
字体大小：0.75em；
颜色：#999；
顶部：-2.25雷姆；
过渡：所有0.625s三次贝塞尔（0.2,0,0.03,1）；
}
.样式化输入{
浮动：左；
宽度：33.3333%；
保证金：2rem 0 1rem；
位置：相对位置；
}
.样式化输入标签{
颜色：#999；
填充：1rem；
位置：绝对位置；
排名：0；
左：0；
过渡：所有0.25s三次贝塞尔（0.2,0,0.03,1）；
指针事件：无；
}
输入{
填充：1rem1rem；
边界：0；
边框底部：1px实心#999；
宽度：84%；
字号：1rem；
}
输入~span{
显示：块；
宽度：0；
高度：3倍；
背景：#e91e63；
位置：绝对位置；
底部：0；
左：0；
过渡：所有0.625s三次贝塞尔（0.2,0,0.03,1）；
}
输入：焦点{
大纲：0；
}
输入：焦点~span{
宽度：100%；
过渡：所有0.625s三次贝塞尔（0.2,0,0.03,1）；
}

名称

这是一个纯CSS解决方案：

。输入容器{
最大宽度：200px；
位置：相对位置；
显示：内联块；
}
.输入容器跨度{
位置：绝对位置；
右：50%；
左：50%；
高度：2倍；
底部：0；
背景：红色；
过渡：0.5s；
}
标签{
位置：绝对位置；
字号：18px；
颜色：#A5；
顶部：20px；
左：10px；
过渡：0.5s；
光标：首字母；
}
输入{
填充：20px 10px 10px；
边界：无；
边框底部：2个实心#ccc；
过渡：0.5s；
}
输入：焦点{
大纲：无；
}
输入：焦点+标签{
字体大小：12px；
顶部：5px；
}
输入：焦点~span{
右：0；
左：0；
}

标签文本

输入必须类似于网站文本字段，而不是移动应用程序编辑文本字段。使用classie.js查看我根据网站标准的解决方案，我在脚本中使用了classie.js，您可以将单独的文件作为资源包含在head标记中。更多关于classie.js的信息，请访问

/*classie.js Strat*/
/*!
*classie类辅助函数
*来自邦佐https://github.com/ded/bonzo
* 
*classie.has（elem，'我的类'）->真/假
*添加（元素“我的新类”）
*类移除（元素“我不想要的类”）
*classie.toggle（元素“我的类”）
*/
/*jshint浏览器：true，strict:true，undef:true*/
/*全局定义：false*/
（功能（窗口）{
"严格使用",；
//来自bonzo的类帮助器函数https://github.com/ded/bonzo
函数classReg（className）{
返回新的RegExp（“（^ |\\s+”+className+”（\\s+|$）”）；
}
//类列表对类管理的支持
//虽然公平地说，api很糟糕，因为它不会同时接受多个类
变量hasClass、addClass、removeClass；
if（'classList'在document.documentElement中）{
hasClass=函数（元素，c）{
返回元素classList.contains（c）；
};
addClass=函数（元素，c）{
元素类列表添加（c）；
};
removeClass=函数（elem，c）{
元素类列表。删除（c）；
};
}
否则{
hasClass=函数（元素，c）{
返回classReg（c）.test（elem.className）；
};
addClass=函数（元素，c）{
如果（！hasClass（elem，c））{
elem.className=elem.className+''+c；
}
};
removeClass=函数（elem，c）{
elem.className=elem.className.replace（classReg（c），“”）；
};
}
函数切换类（elem，c）{
var fn=hasClass（elem，c）？removeClass:addClass；
fn（elem，c）；
}
风险等级={
//全名
hasClass:hasClass，
addClass:addClass，
removeClass:removeClass，
toggleClass:toggleClass，
//简称
has:hasClass，
add:addClass，
remove:removeClass，
切换：切换类
};
//运输
if（typeof define==='function'&&define.amd）{
//AMD
定义（分类）；
}否则{
//浏览器全局
window.classie=classie；
}
})（窗口）；
/*classie.js结束了*/
（功能（）{
//修剪多边形填充：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if（！String.prototype.trim）{
（功能（）{
//确保我们修剪物料清单和物料清单
var rtrim=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g；
String.prototype.trim=函数（）{
返回此。替换（rtrim“”）；
};
})();
}
[].slice.call（document.querySelectorAll（'input.input field'））.forEach（函数（inputEl）{
//如果输入已经填写。。
如果（inputEl.value.trim（）！=''）{
classie.add（inputEl.parentNode，'input filled'）；
}
//活动：
inputEl.addEventListener（'focus'，onInputFocus）；
inputEl.addEventListener（'blur'，onInputBlur）；
} );
输入焦点功能（ev）{
添加类（ev.target.parentNode，“输入已填充”）；
}
函数onInputBlur（ev）{
如果（ev.target.value.trim（）=''）{
类删除（ev.target.parentNode，“输入已填充”）；
}
}
})();

.input{
位置：相对位置；
z指数：1；
显示：内联块；
边缘：1米；
最大宽度：350px；
宽度：钙（100%-2米）；
垂直对齐：顶部；
}
.输入字段{
位置：相对位置；
显示：块；
填充：16px；
宽度：60%；
边界：无；
边界半径：0；
背景：#f0；
颜色：#aaa；
字体大小：400；
字体大小：16px；
-webkit外观：无；
}
.输入字段：焦点{
大纲：无；
}
.输入标签{
显示：内联块；
浮动：对；
填充：0.1em；
宽度：40%；
颜色：#6969；
字体大小：粗体；
字体大小：70.25%；
-webkit字体平滑：ant