jquery 文本框聚焦文字删除

Posted 2020-07-12 进击的前端狗

做作业需要，自己写了一个，写的很烂。

$(function() {   
        $("#search_input").addClass("before_focus");/*文档加载时添加搜索栏提示灰色字体样式*/
        $("#search_input").focus(function(){/*文本框聚焦事件*/
            $("#search_input").removeClass("before_focus");/*移除搜索栏灰色字体样式*/
            $("#search_input").attr("value","");/*聚焦时清除提示句*/    
        })
        $("#search_input").blur(function () {/*文本框失焦事件*/
            $("#search_input").attr("value","请输入关键字...");/*失焦时，添加提示*/            
            $("#search_input").addClass("before_focus");/*失焦时，添加灰色字体样式*/
        })

    })

百度了一下。发现不错的代码

$(function() {
    var obj = $("#search_input"),/*获取搜索框*/
    defVal = obj.val();/*获取搜索框的值*/
    obj.bind({/*绑定事件*/
      focus:function() {/*聚焦事件*/
        var _this = $(this);/*获取这个搜索框*/
        if(_this.val() == defVal){/*如果当前搜索框的值与初始值相等，就清空。if是为了防止用户输入的文字被清除*/
          _this.val(‘‘).removeClass("before_focus");
        };
      },
      blur:function() {/*失焦事件*/
        var _this = $(this);/*获取这个搜索框*/
        if(_this.val() == ‘‘) {/*当文本框的值为空时。恢复文本框初始值*/
          _this.val(defVal).addClass("before_focus");
        }
      }
      });
})