js中表單的聚焦失焦事件
焦點事件:
不是所有元素都有焦點事件,只有可交互性的元素才有,比如表單元素,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; }來改變
js中表單的聚焦失焦事件