有關placeholder在ie9中的一點折騰

placeholder屬性定義： placeholder 屬性規定可描述輸入字段預期值的簡短的提示資訊（比如：乙個樣本值或者預期格式的短描述）。

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

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

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

document.queryselectorall('[placeholder]')

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

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

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

nodes.foreach()

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

var clonenode = item.clonenode()

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

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

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

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

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

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

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

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

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

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

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

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

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

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的差異

相關推薦