placeholder這個屬性 input

2022-02-20 08:09:52 字數 690 閱讀 9615

input是乙個很常見的標籤,大家使用的也很常見,但是我在具體的工作中發現要想完美的使用這個標籤還是任重而道遠,下面是我碰到的幾個問題。

1、我們在使用這個標籤的時候會習慣的加上placeholder這個屬性,起到乙個提示的作用,但是當我們的游標移入的時候提示的文字並沒有消失,這樣就不是我們想要的結果了,這時就需要在input的屬性裡面再加上兩個屬性:

onfocus="this.placeholder='' "

onblur="this.placeholder='需要輸入的內容'"

很簡單的方法,第乙個屬性的意思是當焦點在這個輸入框時,placeholder的內容是空的,第二個屬性的意思是當這個輸入框失去焦點時顯示的內容。

2、ie10及以下的版本並不支援這個屬性,那麼怎麼讓其在ie10以下仍然可以實現這個效果呢,只需要在js檔案裡面引入一段指令碼即可:

按 ctrl+c 複製**

按 ctrl+c 複製**

這時你會發現,placeholder的字型顏色不是 我們需要的顏色,這時你需要在css裡面新增乙個新的類名 phcolor,對其進行操作就可以實現了。

3、同時還要注意的是,在其他瀏覽器裡預設的輸入的文字都是垂直居中的,但是在ie8中卻是頂格,我們需要給其加上line-height屬性,讓裡面的文字垂直居中。

暫時就這麼多的內容了,以後發現問題會及時補充的。

placeholder 屬性修改

當placeholder屬性預設的顏色,樣式等不能滿足我們的需要時,需要修改它的樣式。寫法 input webkit input placeholder 因為placeholder是 html5 中新增加的屬性,需要注意瀏覽器的相容性。webkit input placeholder 使用webki...

placeholder屬性指定樣式

input webkit input placeholder 使用webkit核心的瀏覽器 input moz placeholder firefox版本4 18 input moz placeholder firefox版本19 input ms input placeholder 冒號前寫對應的...

讓IE支援placeholder屬性

html 5 有個很棒的屬性,placeholder,在滑鼠聚焦到input輸入框上面時候,提示文字會消失,失去焦點之後,又會出現 但是在不支援html5的低版本的瀏覽器中,placeholder屬性是無效的,為了解決這個問題,因此,人為的去實現placeholder屬性 jquery placeh...