原生js实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{color: #999;}
    </style>
</head>
<body>
    姓名：    <input type="text" value="hello"><br/>
    <button id="btn">点我得到焦点</button>
</body>
<script>

    //获取元素 程序处理
    var input = document.querySelector('input');

    //绑定获得焦点事件
    input.onfocus = function(){
        //每次该文本框的获得焦点时候设置文本框选中区域(起止都设置为末尾就不会选中，只会把光标设置到末尾)
        obj.target.setSelectionRange(obj.target.value.length,obj.target.value.length);
        //获得焦点时 让文本框中的值变成红色色
        this.style.color = "#FC0000";
        console.log("获得焦点");
    }

    //绑定失去焦点事件
    input.onblur = function(){
        if(this.value == ""){
            this.value = "hello";
        }
        //失去焦点时 让文本框中的值变成浅色
        this.style.color = "#999";
        console.log("失去焦点");
    }

    var btn=document.getElementById('btn');
    btn.onclick=function(){
       //调用文本框的得到焦点事件，让它获得焦点       
        input.focus();
    };
</script>
</html>

Jquery实现

<body>
    姓名：    <input type="text" value="hello"><br/>
    <button id="btn">点我得到焦点</button>
</body>
<script>
    $(function(){
        $("input[type='text']").eq(0).blur(function(){
            console.log('失去焦点');
        });

        $("input[type='text']").eq(0).focus(function(){
            console.log('得到焦点');
        });

        $("#btn").click(function(){
            var a=$("input[type='text']").eq(0).focus();
        });

    });
</script>