移動端的坑 之 在可編輯的div中實現placeholder

標籤：please   ipo   lease   編輯   內容   hold   文字框   沒有   換行   

1.當我們個  div 設定了 contenteditable = "true" 這個塊狀元素就可以編輯了, 如果要實現 placeholder 直接寫上去是沒有效果的

<div contenteditable="true"  placeholder="please write infomation"></div>//沒有效果

 

2.可以添加樣式來實現

*[contenteditable="true"]:empty:before{        content:attr(placeholder);        color: #A9A9A9;    }

這段代碼匹配 屬性 contenteditable="true" 的元素類容為empty時添加:before虛擬元素 

　　attr(placeholder)擷取屬性placeholder的值賦值給content這樣就可以類比的實現文字框中 placeholder 屬性,

 

3.在ipone機中首次顯示時是ok的,當你輸入內容後再清空發現 並沒有顯示再顯示placeholder的內容，這是因為這個可編輯的塊這時不是空，還有分行符號，

如果我們有使用jquery，zepto等我們可以拿到這個元素的text();跟這個元素再賦值“”;

如果我們用js,用innerText去擷取塊元素的值，你會發現不管你值是否為空白都是true,就沒有辦法判斷我什麼時候是空(只有在ipone中才這樣)，

然後我就去看了下jquery中的text()是怎麼實現的，它用了一個textContent屬性，用這個屬性就可以判斷到

移動端的坑 之 在可編輯的div中實現placeholder