# 2.屬性篇 - 1. placeholder --實際應用中可用 用於input的提示信息 ```html <input type="text" placeholder="手機/郵箱/用戶名"> ``` - 2. Calendar, date, time, email, color, range ...
# 2.屬性篇 - 1. placeholder --實際應用中可用 用於input的提示信息 ```html <input type="text" placeholder="手機/郵箱/用戶名"> ``` - 2. Calendar, date, time, email, color, range, url, search --實際應用中一般不使用，相容性有問題 ```html <form> <!-- Calendar --> <input type="date"> <!-- chrome支持,Safari不支持,IE不支持 --> <input type="time"><!-- chrome支持,Safari不支持,IE不支持 --> <input type="week"><!-- chrome支持,Safari不支持,IE不支持 --> <input type="datetime-local"><!-- chrome支持,Safari不支持,IE不支持 --> <input type="number"> <!--限制輸入為數字chrome支持,Safari不支持,IE不支持--> <input type="email"><!-- chrome,Firefox支持,Safari不支持,IE不支持 --> <input type="color"><!-- chrome支持,Safari不支持,IE不支持 --> <input type="range" min="1" max="100" name="range"><!-- chrome支持,Safari支持,firefox不支持,IE不支持 --> <input type="search" name="search"><!-- chrome支持,Safari支持一點,IE不支持 --> <input type="url"><!-- chrome支持,firefox支持,Safari不支持,IE不支持 --> <input type="submit"> </form> ``` - 3. contenteditable --實際應用中可用 對元素中的文本節點可以編輯 屬性可以繼承，父元素有此屬性，子元素沒有，子元素繼承父元素此屬性 ```html <div contenteditable="true"> hello<br> <span>world</span> </div><!--沒有相容性問題，這個屬性是可以使用的--> ``` - 4. draggable --實際應用中一般不使用，相容性有問題 使元素可拖拽 拖拽的生命周期： 拖拽開始，拖拽進行中，拖拽結束 拖拽的組成： 被拖拽的物體，目標區域（目標元素） 被拖拽元素的事件： ondragstart:拖拽開始事件,按下物體的一瞬間是不會觸發拖拽開始事件的 ondrag:拖拽進行事件 ondragend:拖拽結束事件 通過開始事件中e.clientX和結束事件中e.clientX可以計算出元素橫移的距離 拖拽目標元素的事件： ondragenter:被拖拽元素上的滑鼠進入目標區域才觸發的，不是被拖拽元素圖形進入目標元素就觸發的。 ondragover:被拖拽元素上的滑鼠進入目標區域會不停的觸發。 ondragleave:被拖拽元素上的滑鼠離開目標區域觸發。 ondrop:被拖拽元素上的滑鼠在目標區域鬆開觸發。只有在ondragover中阻止預設事件e.preventDefault()，才會觸發ondrop事件 所有的標簽元素，當拖拽周期結束時，預設事件是回到原處 事件是由行為觸發的，但是一個行為可以不止觸發一個事件 ```html <style> .test{ width:100px; height:100px; background:#f0f; position:absolute; left:0; top:0; } .target{ width:200px; height:200px; border:1px solid black; position:absolute; left:600px; top:200px; } </style> <div class="test" draggable="true"></div><!--chrome,safari支持,firefox不支持--> <div class="target"></div> <script> var oDragDiv = document.getElementsByClassName("a")[0]; oDragDiv.ondragstart = function(e){ console.log(e); } oDragDiv.ondrag = function(e){ console.log(e); } oDragDiv.ondragend = function(e){ console.log(e); } </script> <script> //實現拖拽功能 var oDragDiv = document.getElementsByClassName("a")[0]; var beginX = 0, beginY = 0; oDragDiv.ondragstart = function(e){ beginX = e.clientX; beginY = e.clientY; } oDragDiv.ondragend = function(e){ var x = e.clientX - beginX; var y = e.clientY - beginY; oDragDiv.style.left = oDragDiv.offsetLeft + x + "px"; oDragDiv.style.top = oDragDiv.offsetTop + y + "px"; } </script> <script> //拖拽到目標區域 var oDragDiv = document.getElementsByClassName("a")[0]; oDragDiv.ondragstart = function(e){ } oDragDiv.ondragend = function(e){ } var oDragTarget = document.getElementsByClassName("target")[0]; oDragTarget.ondragenter = function(e){ } oDragTarget.ondragover = function(e){ e.preventDefault(); } oDragTarget.ondragleave = function(e){ } oDragTarget.ondrop = function(e){ console.log("drop"); } </script> <!--預設可拖拽標簽 --> <a href="http://www.baidu.com">baidu</a> <img src="1.jpg"> ``` - 5. e.dataTransfer.effectAllowed 和 e.dataTransfer.dropEffect --實際應用中一般不使用，相容性有問題 e.dataTransfer.effectAllowed:寫在ondragstart事件中，用來改變滑鼠樣式 e.dataTransfer.dropEffect:寫在ondrop事件中，用來改變滑鼠樣式 ```html <style> .test{ width:100px; height:100px; background:#f0f; position:absolute; left:0; top:0; } .target{ width:200px; height:200px; border:1px solid black; position:absolute; left:600px; top:200px; } </style> <div class="test" draggable="true"></div><!--chrome,safari支持,firefox不支持--> <div class="target"></div> <script> //拖拽到目標區域 var oDragDiv = document.getElementsByClassName("a")[0]; oDragDiv.ondragstart = function(e){ e.dataTransfer.effectAllowed = "link"; } var oDragTarget = document.getElementsByClassName("target")[0]; oDragTarget.ondrop = function(e){ e.dataTransfer.dropEffect = "link"; } </script> ``` 以上是markdown格式的筆記
