原生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>
