有關placeholder在ie9中的一點折騰。

問題： placeholder屬性給予了使用者很友好的提示，但是在老版本的瀏覽器中就不會起作用（internet explorer 9 及之前的版本不支援 placeholder 屬性），這是乙個很頭疼的問題，於是就產生了以下的思考。

1.判斷瀏覽器是否支援placeholder屬性

'placeholder' in document.createelement('input')

2.獲取當前頁面中的所有具有placeholder屬性的元素

document.queryselectorall('[placeholder]')

3.由於document.queryselectorall返回的是乙個 nodelist 物件,需要將其通過array.prototype.slice.call()將其轉換成陣列，這樣我們就可以通過陣列的foreach()方法對頁面中獲取到的所有元素進行遍歷

array.prototype.slice.call(document.queryselectorall('[placeholder]'))

4.對獲取到的頁面中的所有具有placeholder屬性的元素進行遍歷

nodes.foreach()

5.根據當前元素轉殖出乙個一樣的轉殖節點(備註：這裡的思想是這樣的，轉殖出乙個一樣的節點插入到當前節點的後面，當瀏覽器不支援placeholder屬性的時候，需要顯示placeholder屬性的資訊，就將轉殖節點顯示出來，將當前節點隱藏掉)

var clonenode = item.clonenode()

6.判斷節點的型別，如果節點的型別[type="password"],就將轉殖節點的型別改為text

if (clonenode.getattribute('type').tolowercase() === 'password')

7.將轉殖節點的placeholder屬性值，寫入value；並將此轉殖節點隱藏

clonenode.setattribute('value', clonenode.getattribute('placeholder')) clonenode.style.display = 'none'

8.將轉殖節點插入到當前節點的後面

item.insertadjacenthtml('afterend', clonenode.outerhtml)

9.對轉殖節點繫結focus事件，當轉殖節點獲取焦點時，將轉殖節點隱藏，並將當前節點顯示出來，並將當前節點獲取焦點

item.nextsibling.addeventlistener('focus', function () )

10對當前節點繫結focus事件，當前節點獲取焦點時，將緊跟在當前節點後面的轉殖節點隱藏掉

item.addeventlistener('focus', function () )

11.對當前節點繫結blur事件，當前節點失去焦點時，如果當前節點沒有進行任何輸入，則需要對齊進行placeholder提示，這時就將當前節點隱藏，將緊跟在當前節點後面的轉殖節點顯示出來

item.addeventlistener('blur', function () })

12.在頁面初始化完成後，判斷當前節點是否有初始輸入值，如果沒有的話，將當前節點隱藏，將緊跟在當前節點後的轉殖節點顯示出來

if (!item.value)

if (!('placeholder'
in document.createelement('input'))) )
item.addeventlistener('blur', function
() })
var clonenode = item.clonenode()
// 如果[type='password']型別，則轉為text
if (clonenode.getattribute('type').tolowercase() === 'password') 
clonenode.setattribute('value', clonenode.getattribute('placeholder'))
clonenode.style.display = 'none'
item.insertadjacenthtml('afterend', clonenode.outerhtml)
item.nextsibling.addeventlistener('focus', function
() )
if (!item.value) 
})} 複製**

有關placeholder在ie9中的一點折騰。

有關placeholder在ie9中的一點折騰

在for迴圈中 i 跟 i 有區別嗎？

HTML input在火狐chrome和ie的差異

有關placeholder在ie9中的一點折騰。

有關placeholder在ie9中的一點折騰

在for迴圈中 i 跟 i 有區別嗎？

HTML input在火狐chrome和ie的差異

相關推薦