本文介绍如何使用JavaScript为网页中的input输入框和textarea文本框添加自定义的鼠标悬停（hover）与焦点（focus）视觉效果。通过脚本监听元素状态变化，动态调整样式，提升用户交互体验。
JavaScript实现input与textarea的自定义Hover与Focus效果
本文通过具体实例，详细讲解如何利用JavaScript为网页中的input输入框和textarea文本框实现自定义的鼠标悬停（hover）与焦点（focus）视觉效果。该方法旨在增强用户交互体验，供开发者参考使用。
该方案演示了如何为input和textarea元素添加自定义的hover和focus样式。其中，hover指鼠标悬停时的视觉反馈，focus指元素获得焦点时的状态表现。实现此类效果需借助JavaScript进行状态监听与样式控制，此示例完整覆盖了输入框与文本框的这两种交互场景。
实际运行效果如下图所示：
如需在线查看演示，请访问以下地址：
http://demo.jb51.net/js/2015/js-input-textarea-hover-focus-style-codes/
具体实现代码如下：
<title>JavaScript为input/textarea自定义hover,focus效果</title>
<script type="text/javascript">
function suckerfish(type, tag, parentId) {
if (window.attachEvent) {
window.attachEvent("onload", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});
}
}
sfHover = function(sfEls) {
for (var i=0; i < sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" iptHover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iptHover\\b"), "");
}
}
}
sfFocus = function(sfEls) {
for (var i=0; i < sfEls.length; i++) {
sfEls[i].onfocus=function() {
this.className+=" iptFocus";
}
sfEls[i].onblur=function() {
this.className=this.className.replace(new RegExp(" iptFocus\\b"), "");
}
}
}
</script>
<style type="text/css">
textarea{
border:1px solid #BBE1F1;
width:250px;
height:80px;
}
.iptHover,input:hover,textarea:hover{
border:1px solid #77C2E3;
}
.iptFocus,input:focus,textarea:focus{
border:1px solid #77C2E3;
background-color:#EFF7FF;
}
</style>
<input type="text" name="textfield" /><br />
<textarea name="textarea"></textarea>
<script type="text/javascript">
suckerfish(sfHover, "input");
suckerfish(sfFocus, "input");
suckerfish(sfHover, "textarea");
suckerfish(sfFocus, "textarea");
</script>
希望本文提供的代码示例能对读者的JavaScript程序设计工作提供有益帮助。