js获取文本框焦点及焦点消失小结

                                                                           返回主页

这篇文章是对javascript获取输入文本框焦点及焦点失去的视觉反馈的小结。在对QQ注册页面的模仿时遇到这个问题，做一个小记录便于之后查看。(审美什么的就忽略吧(*^__^*) )

先看结果

1. 焦点获取时候，文本框颜色为蓝色

2. 焦点失去时候，事件触发。文本框颜色改变为红色

实现原理：

通过javascript函数对文本框onClick()以及onblur()事件进行控制。

代码如下：

<script type="text/javascript">
        //失去焦点改变颜色为红色
        function changeBorderColorBlur(str) {
            var inputBox = document.getElementById([str]);
            inputBox.style.borderColor = "red";
        }
        //得到焦点改变颜色为蓝色
        function changeBorderColorClick(str) {
            var inputBox = document.getElementById([str]);
            inputBox.style.borderColor = "#00BFFF";
        }
</script>

解释：定义参数str传入document.getElementById()，针对目标dom进行操作。 PS：之所以抽象成一个可重用方法是因为之前为了操作不同的Dom写了一堆重复代码。这样做能够提高代码的复用，何乐而不为？