html 測試 上入 下出

html 測試 單入 單出

html 測試 左右 各一 測試

html 測試 左入右出

尾部連結 hbbb(xx)

onload onscroll onresize

2018年3月12日 星期一

focus() 取得焦點 / blus() 焦點消失

focus() 取得焦點 / blus() 焦點消失 / onmouseover / onmouseout
CSS :focus /



blur focus 焦点選擇。
當一個元素失去焦點的時候 blur, 一個元素焦點所在為 focus。

blur() 函數, 方法用於把鍵盤焦點從該元素上移開。
focus () 函數, 方法用於把該元素就會獲得焦點。

onmouseover 事件是 JavaScript event 的一種,事件用來判斷滑鼠移至特定對象或網頁元素上,假設發生滑鼠移至安插 onmouseover 事件的元素上,將會觸發特定的 JavaScript 函式開始執行特定的工作,例如當滑鼠移至一張圖片img、文字、 DIV 區塊上,自動顯示對話視窗介紹圖片,或者是滑鼠移到某張網頁縮圖上,就自動顯示原始大圖,都是常見到的 onmouseover 事件應用方式,所有主流的瀏覽器都支援 onmouseover 事件。

onmouseout 事件是 JavaScript event 的一種,用來判斷當滑鼠游標移出某個對象或網頁元素,例如移開連結、移開 圖片 img、文字、 DIV 區塊 等,當有這樣的使用情況發生,onmouseout event 將會觸發特定的 JavaScript function 去執行特定的工作,與 onmouseout 相對應的 event 是 onmouseover event,當滑鼠移經某個網頁元素可以被 onmouseover 監聽到,移出元素則可被 onmouseout 監聽到。

onmousedown 事件是 JavaScript event 的一種,事件會發生在當按下滑鼠按鍵的時候,這裡指的按鍵不一定是滑鼠左鍵,而是滑鼠上的任何一個按鍵,通常可以安插在網頁的各種元素中,例如圖片 img、文字、 DIV 區塊、span 區域、段落、甚至是直接寫在 標籤內,用來判斷網友是否有用滑鼠點選某些特定的元素,進而觸發特定的 JavaScript function 去執行工作,所有主流的瀏覽器都支援 onmousedown 事件。

<style>
.Tinput:focus {background-color: yellow}
.Tinput {background-color: lime }
</style>

<input class="Tinput" onmouseout="this.blur();this.value='⇦ blur'" onmouseover="this.focus();this.value='⇦ focus'" type="type" value="⇦ blur" />滑鼠游標請移入輸入欄看看。

<input class="Tinput" onmouseout="this.blur();this.value='⇦ blur'" onmouseover="this.focus();this.value='⇦ focus'" type="type" value="⇦ blur" />     滑鼠游標請移入輸入欄 onclick 。

<input class="Tinput" id="FBinput" type="type" value="⇦ blur" />
<input type="button" value="focus" onclick="document.getElementById('FBinput').focus();document.getElementById('FBinput').value='focus'">
<input type="button" value="blur"  onclick="document.getElementById('FBinput').blur();document.getElementById('FBinput').value='blur'">

沒有留言:

張貼留言