textarea 渲染HTML tag

<script>
function submit_test(){
$('#editable').val($('#editable_div').html());
}
function submit_test2(){
$('#editable_div').html($('#editable').val());
}
</script>

<style>
.editable, .editable_div { width:600px; }
.editable { height:100px; }
.editable_div {
    height: 200px;
    border: 1px solid #ccc;
    padding: 10px;
    margin : 0 0 15px 0;
    background: #cccccc;
    box-shadow: 10px 10px 5px #888888;
}
</style>

<textarea id="editable"  class="editable" ></textarea><br/>
<div id="editable_div" class="editable_div" contenteditable="true">
  <img src="http://127.0.0.1/Docs/Images/utf-8/style1/logo02.png"><br/>
  contenteditable 属性规定元素内容是否可编辑。
</div>
<a class="btn" href="#" onclick="document.execCommand('bold');">bolt</a>
<a class="btn" href="#" onclick="document.execCommand('italic');">italic</a>
<a class="btn" href="#" onclick="document.execCommand('underline');">underline</a>
<a class="btn" href="#" onclick="submit_test();">submit</a>
<a class="btn" href="#" onclick="submit_test2();">submit2</a>

[HTML5] INPUT FILE 限制 MIMEtype 的選擇

文章出處 http://shinychang.net/article/53ff169465dd204503e125ad

<input type='file'>使用accept屬性，在W3C的規格只允許Image/*、Video/*、Audio/*三種MIMEtype是允許的
也就是說上述三種以外的選擇，就只能選擇所有檔案*.*

接下來直接看範例

<div>All Files <input type='file'></div>
<div>Images <input type='file' accept='image/*'></div>
<div>Videos <input type='file' accept='video/*'></div>
<div>Audios <input type='file' accept='audio/*'></div>
<div>Zip Files <input type='file' accept='.zip'></div>
<div>Custom <input type='file' accept='.zip,.rar,.7z'></div>

第一個是使用了最基本的，也就是沒有任何的限制
第二到第四個則是使用HTML5的規範內的MIMEtype
第五個則是限制只能上傳.zip結尾的ZIP檔
最後一個，則是同時允許.zip, .rar和.7z三種格式
透過這樣的範例，就知道怎麼去限制不同類型的檔案

不過這邊要特別注意一點，即便前端已經限制住了，後端也一定要檢查
使用者傳來的資料永遠都是不可信的！

至於瀏覽器相容性的部分，IE10+
第五和第六種都是非W3C規範內的所以FireFox不支援