js中表单的聚焦失焦事件

Posted 2020-09-27 angeliaxu

焦点事件：
　　不是所有元素都有焦点事件，只有可交互性的元素才有，比如表单元素，a标签。页面中只能有一个元素有焦点，一个聚焦，另一个就失焦，默认在document。

例子结构如下：　　

　　<form>
　　　　<input type="text" name="txt1" id="txt" />
　　　　<input type="button" name="btn" value="点击" />
　　</form>

js操作如下：

　　1.form.txt1.focus();    // 让元素获得焦点，该方法不会触发onfocus（）事件。

　　2.form.txt1.onfocus=function(){console.log(1);}  //  元素获得焦点时会触发该事件

　　3.form.txt1.onblur=function(){console.log(2);}　　//元素失去焦点时触发该事件

　　4.form.btn.onclick=function(){ form.txt1.select(); }  //选中输入框中的所有文字

　　5.form.btn.onclick=function(){ form.txt1.setSelectionRange(2,5) ; form.txt1.focus(); } / / setSelectionRange需要配合着focus（）使用才看得到效果，其中setSelectionRange的结束位置不包含在内，setSelectionRange（start，end）包含两个参数，一个是start：起始位置；一个是end：结束位置。

　　默认情况下，输入框中的文字被选中的文字颜色是蓝色，如果想要改变背景颜色，可以使用 #txt::selection{ background: pink; }来改变