html5 contenteditable 可編輯屬性
阿新 • • 發佈：2019-01-08
今天在工作中遇到了這樣的需求。如上gif顯示。 於是就仔細的看下了 h5新增的這個可編輯屬性 contenteditable contenteditable 屬性規定是否可編輯元素的內容。contenteditable 可以設定為true/false
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style type="text/css">
ul{ margin: 0; padding: 0; } ul li{ display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; list-style: none; padding: 10px; margin: 0; }
li div{ width: 85%; border: 1px solid #f0f0f0; } #name.placeholder:after{ content: "請輸入姓名"; color: #ddd; } #address.placeholder:after{ content: "請輸入地址"; color: #ddd; } </style> </head> <body> <ul> <li><span>姓名:</span><div contenteditable="true" id="name" class="placeholder"></div></li> <li><span>地址:</span><div contenteditable="true" id="address" class="placeholder"></div></li> </ul> <script type="text/javascript">
// 開始編輯時觸發 document.getElementById('name').oninput = function(){ var text = this.innerHTML; if(text.length != 0){ this.classList.remove('placehold'); } } document.getElementById('address').oninput = function(){ var text = this.innerHTML; if(text.length != 0){ this.classList.remove('placehold'); } } </script> </body> </html>
上面是一個使用的例子； 主要想說明下， （1）contenteditable 在編輯時如果手動的按了換行鍵，這裡會新增一個div。這個不論定義被編輯屬性的標籤是什麼，這裡換行後都會新增一個div包起來。 （2）給編輯框新增一個placeholder, 當編輯的時候會出發oninput事件。
這裡順便把編輯屬性和input type = text的編輯觸發事件給總結下 這兩個裡面還是有區別的、我測試中發現，具有編輯屬性的標籤不會觸發onchange事件 1.onfocus 當input 獲取到焦點時觸發
<!DOCTYPE html> <html>
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style type="text/css"> ul { margin: 0; padding: 0; }
ul li { display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; list-style: none; padding: 10px; margin: 0; }
#name { display: inline-block; width: 85%; border: 1px solid #f0f0f0; }
#name.placehold:after { content: "請輸入姓名"; color: #ddd; }
#address.placehold:after { content: "請輸入地址"; color: #ddd; } </style> </head>
<body> <ul> <li><span>姓名:</span><span contenteditable="true" id="name" class="placehold"></span></li> <li><span>地址:</span> <div contenteditable="true" id="address" class="placehold"></div> </li> </ul> <input type="text" id="inputclick" placeholder="我是一個input" />
<script type="text/javascript"> // 開始編輯時觸發 document.getElementById('name').oninput = function() { console.log('oninput'); var text = this.innerHTML; if (text.length != 0) { this.classList.remove('placehold'); } }
// 這個方法沒有觸發 非input 其他的具有編輯屬性的標籤不能觸發onchange // document.getElementById('name').onchange = function() { // console.log('onchange'); // }
// input // inputclick 獲取焦點時觸發了onfocus/onclick // 當name 失去焦點觸發了onblur,onchange // 當name 通過鍵盤輸入時，一次觸發 onkeydown,oninput,onkeyup // oninput 事件，獲取焦點後開始編輯就可以時時獲取到輸入的內容 //
document.getElementById('inputclick').onfocus = function() { console.log('inputclick-onfocus'); } document.getElementById('inputclick').onblur = function() { console.log('inputclick-onblur'); }
document.getElementById('inputclick').onkeydown = function() { console.log('inputclick-onkeydown'); }
document.getElementById('inputclick').onkeyup = function() { console.log('inputclick-onkeyup'); }
document.getElementById('inputclick').onclick = function() { console.log('inputclick-onclick'); }
document.getElementById('inputclick').onselect = function() { console.log('inputclick-onselect'); }
document.getElementById('inputclick').oninput = function() { console.log('inputclick-oninput'); }
document.getElementById('inputclick').onchange = function() { console.log('inputclick-onchange'); }
document.getElementById('address').oninput = function() { var text = this.innerHTML; if (text.length != 0) { this.classList.remove('placehold'); } }
// 當name 獲取焦點時觸發了onfocus/onclick // 當name 失去焦點觸發了onblur // 當name 通過鍵盤輸入時，一次觸發 onkeydown,oninput,onkeyup // oninput 事件，獲取焦點後開始編輯就可以時時獲取到輸入的內容 // 注意 onchange 沒有被觸發
document.getElementById('name').onfocus = function() { console.log('onfocus'); } document.getElementById('name').onblur = function() { console.log('onblur'); }
document.getElementById('name').onkeydown = function() { console.log('onkeydown'); }
document.getElementById('name').onkeyup = function() { console.log('onkeyup'); }
document.getElementById('name').onclick = function() { console.log('onclick'); }
document.getElementById('name').onselect = function() { console.log('onselect'); }
document.getElementById('name').oninput = function() { console.log('oninput'); }
document.getElementById('name').onchange = function() { console.log('name-onchange'); } </script> </body> </html>
引用了一篇文章
所有的現代瀏覽器支援 oninput，其中包括IE9。對於那些老式瀏覽器，在不支援該事件時用 keydown作為優雅降級。
不幸的是，檢測瀏覽器對該 oninput事件的支援性並不容易。假定瀏覽器支援 oninput，那麼以下這段js程式碼的返回值為 true，否則為 false。 'oninput' in document . createElement ('input')
這段程式碼在大多數瀏覽器中正常執行，除了 Firefox（見 bug #414853）（我在這裡測試是可以的 54.0.1 (64 位)），
故仍舊需要 為oninput作瀏覽器特性檢測。除此以外就沒必要為其他瀏覽器作特性檢測了，只需為 input和 keydown繫結事件，並在 oninput事件觸發之後刪除 onkeydown即可。示例如下： someElement . oninput = function() { el . onkeydown = null; // Your code goes here }; someElement . onkeydown = function() { // Your code goes here } keydown 事件僅會被觸發一次（在 oninput 事件觸發前），之後再觸發 oninput 。雖然並不完美，但總比寫上一大堆 oninput 特性檢測程式碼要好些吧。
IE 事件相容 onpropertychange