javascript实现网页搜索条输入框的获焦和失焦事件

一、搜索条输入框获得焦点后

（一）如果用户已经在输入框中输入了文本，则保留原状，即保留用户输入的文本，用户输入的文本颜色可以设置为黑色或者其它颜色；

（二）如果用户在获得焦点前并未进行操作，默认文本清空，用户不需要删除默认文本可以直接输入要搜索的内容，默认文本颜色可以设置为灰色或者其它颜色；

二、搜索条输入框失去焦点后

（一）如果用户输入了文本，将会保留用户输入的文本；

（二）如果用户在失去焦点前并未进行操作，即未输入文本，将恢复默认文本。

JS代码如下：

/*
     * 搜索条输入框的获焦和失焦事件
     *      调用方法：searchInput("输入框的id","默认文本的颜色","用户输入的文本的颜色")
     *      参    数: 1-3个,参数1必选;若参数2、3无值,则默认文本颜色为"black",输入框文本颜色为"gray"
     *      例    如: searchInput("textarea","请输入您要搜索的内容","black","gray")
     */
function searchInput(Id, defaultColor, inputColor) {
        // 获取搜索条的输入框的Id
        var ipt = document.getElementById(Id);
        // 可以设置搜索框的默认文本
        var defaultText = ipt.value;
        // 没有触发事件时，默认文本的颜色为灰色
        ipt.style.color = defaultColor;
        // 没有设置默认文本颜色时，默认文本颜色为灰色
        if (defaultColor == undefined) {
            defaultColor = "gray";
        }
        // 没有用户输入的文本颜色时，输入框文本颜色为黑色
        if (inputColor == undefined) {
            inputColor = "black";
        }
        // 绑定事件：输入框获得焦点
        ipt.onfocus = function () {
            // 获得焦点时，文本如果为默认文本
            if (this.value == defaultText) {
                // 清空当前默认文本
                ipt.value = "";
                // 用户输入的文本的颜色为黑色
                ipt.style.color = inputColor;
            }
        }
        // 绑定事件：输入框失去焦点
        ipt.onblur = function () {
            // 失去焦点时，如果输入框的文本为空
            if (this.value == "") {
                // 说明用户没有输入文本，恢复默认文本
                ipt.value = defaultText;
                // 默认文本的颜色为灰色
                ipt.style.color = defaultColor;
            }
        }
    }