有啊彩票走势图
靠譜的軟件下載站
當前位置:  IEfans/ IE專區/ IE動態/ jQuery實現IE輸入框完成placeholder標簽功能的方法

jQuery實現IE輸入框完成placeholder標簽功能的方法

IE動態 秩名 2019-04-04 09:04

本文實例講述了jQuery實現IE輸入框完成placeholder標簽功能的方法。分享給大家供大家參考,具體如下:

如果在輸入框加上placeholder="xx"屬性,例如:

jQuery實現IE輸入框完成placeholder標簽功能的方法

則可以在谷歌瀏覽器等高級瀏覽器的輸入框中實現替換文本的功能,也就是得到如下圖所示的對話框:

jQuery實現IE輸入框完成placeholder標簽功能的方法

但是這個屬性在WIN7默認的瀏覽器IE8中無法兼容,更不要說IE6了。也就是說IE里面不支持placeholder這個標簽。

不信的話,大可以把這段代碼拉到IE8里面運行下試試,你只不過是得到一個空的對話框

思想很簡單,一開始這個文本框默認為#cccccc灰色字體,值為“請輸入關鍵詞”,當得到焦點之后,把它的顏色設置為#000000黑色,值為空,一旦其失去焦點,如果值為空,馬上把其恢復默認的#cccccc灰色字體,值為“請輸入關鍵詞”

代碼如下:

jQuery實現IE輸入框完成placeholder標簽功能的方法

這里注意的是,是加入一個isthisnull的布爾值來判斷其是否為空,是為了判斷用戶是否要輸入“請輸入關鍵詞”,

不能認為文本框里面有“請輸入關鍵詞”就是空,如果用戶自己輸入“請輸入關鍵詞”呢?

這里也不應該用jquery或者javascript來取color或者style的值是否為"#cccccc"或者“color:#cccccc”來判斷,因為通過$(this).css("color")來取color,在不瀏覽器輸出的結果是不一樣的,而取style的話,ie會認為這是一個object,而不是字符串

設置一個isthisnull,也可以為后面進一步的表單驗證做準備

最終在IE中得到如下效果:

jQuery實現IE輸入框完成placeholder標簽功能的方法

標簽: IE動態

Copyright ? 1998-2019 www.gxrch.com.cn All Rights Reserved 湘ICP備13012168號-17
有啊彩票走势图