網頁開發 網頁設計

免寫Javscript!HTML內建INPUT輸入框,就能顯示預載文字與滑入隱藏

2019/08/13

梅問題-免寫Javscript!HTML內建INPUT輸入框預載顯示文字與滑入隱藏
  雖然INPUT輸入框,是HTML相當基本的語法,但對於大多數的網設來說,要使用到它的機率相當的低,就連梅干也不例外,直到最近開始在實作一些客製化的Google表單時,才讓梅干有大量的使用INPUT輸入框的語法,而在INPUT的輸入框中,還有一些屬性可作設定。

  像是預載時,在輸入框中顯示提示文字,當滑鼠移入輸入框時,文字就自動消失,而這一連串的動作,早期梅干都是搭配Javascript,但現在不用這麼麻煩啦!HTML在INPUT輸入框的語法中,還內建幾個屬性可作設定,包含預載時顯示文字,與滑入時隱藏文字,且完全不用寫任何的Javascript,因此有需要的朋友,現在也一塊來看看囉!


語法提示:
placeholder:當輸入框載入時顯示的文字
onfocus:準焦,就是當滑鼠滑入輸入框時
onblur:失焦,就是當滑鼠離開輸入框時

Step1
首先在input的標籤中,分別在placeholder加入要顯示的文字,接著在onfocus的地方,將placeholder變成空白,最後onblur就是滑鼠移開輸入框時,再顯示placeholder的提示文字,若輸入框已有文字,則不會再顯示提示文字。
梅問題-免寫Javscript!HTML內建INPUT輸入框預載顯示文字與滑入隱藏
Step2
當完成後,立馬可以來實驗一下,當滑鼠移到輸入框時,輸入框會被選取同時裡面的文字會消失,當移開時提示文字會再次顯示,這樣是不是超簡單的呀!!完全不用寫到任何的Javascript啦!
梅問題-免寫Javscript!HTML內建INPUT輸入框預載顯示文字與滑入隱藏
範例預覽: