Div + contenteditable【h5】屬性製作的編輯框和textarea製作的文本域如何實現換行

什麼是contenteditable？

HTML中的contentEditable的屬性可以打開某些元素的可編輯狀態．也許你沒用過contentEditable屬性．甚至從未聽說過．contentEditable的作用相當神奇．可以讓div或整個網頁，以及span等等元素設置爲可寫。我們最常用的輸入文本內容便是input與textarea，使用contentEditable屬性後，可以在div,table,p,span,body,等等很多元素中輸入內容．
如果想要整個網頁可編輯，請在body標籤內設置contentEditable
contentEditable已在html5標準中得到有效的支持。
在IE8下設置表格可寫不支持，其他元素沒有問題。在Firefox運行一切正常。谷歌瀏覽器運行一切正常。

如何實現可編輯的Div換行（Div + contenteditable）

1. 製作一個可編輯的Div

<div id="editor"  placeholder="請輸入您的內容" contenteditable="true" style="overflow-y:scroll;">
</div>

2. 給editor綁定鍵盤監聽方法，回車發送消息，shift + 回車文本換行

//綁定鍵盤監聽事件
    $("#editor").bind('keydown',function(e){
        if(e.keyCode == 13 && !e.shiftKey){
            //按下了enter鍵，發送消息
            sendmsg();
            e.preventDefault();
        }
        if(e.shiftKey && e.keyCode == 13){
            按下了shift + enter組合鍵，文本換行
            var content=$("#editor").html();
            $("#editor").html(content+"<div><br/></div>");
            //e.preventDefault();
            //加上e.preventDefault(); shift+ enter效果會有問題，換行符號加上了，但是光標不會跑到下一行，而是回到原來行的行首
        }
        return;
    });

如何實現textarea換行

1. 製作一個文本域

<textarea class="msgedit" cols="82" id="send_msg_text"  rows="5"></textarea>

2. 給文本域綁定鍵盤監聽事件，回車發送消息，shift + 回車文本換行

//綁定鍵盤按下時，文本域觸發的事件
    $("#send_msg_text").bind('keydown',function(e){
        if(e.keyCode == 13 && !e.shiftKey){
            //按下了enter鍵，發送消息
            onSendMsg();
            e.preventDefault();
        }
        if(e.shiftKey && e.keyCode == 13){
            //按下了shift + enter組合鍵，文本換行
            var content=$("#send_msg_text").val();
            $("#send_msg_text").val(content+"\n");
            e.preventDefault();
        }
        return;
    });