2.屬性篇(新增的一些屬性）

# 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格式的筆記