<!doctype html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="utf-8"> <title>contenteditable,Ctrl+Enter换行，Enter发送</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="author" content=""> <style type="text/css"> #msgList, #editor, #error{ 500px; margin: auto; padding: 10px; } #msgList { min-height: 100px; } #editor { border: 1px solid #CCC; background: #F5F5F5; overflow: auto; line-height: 22px; height: 80px; outline-style: none; font-size: 14px; } #error { color: #F30; font-size: 12px; padding:0; line-height: 25px; } .msg-item { border: 1px solid #EEE; background: #FEFEFE; margin: 10px 0; padding: 10px; font-size: 12px; } </style> </head> <body> <div id="msgList"></div> <div id="editor" contenteditable="true" style="color:#CCC;">在这里输入，按Enter发出。<br>Ctrl+Enter换行。</div> <div id="error"></div> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script> $(function(){ $('#editor').on('focus',function(){ var $this = $(this); if($this.html().replace(/s/g,'')=='在这里输入，按Enter发出。<br>Ctrl+Enter换行。'){ $this.html('').css('color','#333'); } }) $('#editor').on('blur',function(){ var $this = $(this); if($this.html().replace(/s/g,'')==''){ $this.html('在这里输入，按Enter发出。<br>Ctrl+Enter换行。').css('color','#CCC'); } }) document.onkeydown = function(e){ var $editor = $('#editor'); //编辑框聚焦下才触发事件 if($editor.is(':focus')){ var inputText = $('#editor').html(); if(!e) e = window.event; //按ctrl+enter换行 if (e.ctrlKey && e.which == 13){ $editor.html($editor.html()+'<br><br>'); placeCaretAtEnd($editor.get(0)); $editor.animate({scrollTop:10000},100) return false; } //按enter发送 if((e.keyCode || e.which) == 13){ if(inputText==''){ $('#error').html('请输入内容'); return false; } $('#error').html(''); var str = '<div class="msg-item">'+ '<div class="msg-content">'+inputText+'</div>'+ '</div>' $('#msgList').append(str); $editor.html(''); $('#msgList').animate({scrollTop:100000},200); return false; } } } function placeCaretAtEnd(el) { el.focus(); if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } } }) </script> </body> </html>