在頁面上的輸入框中即可以輸入文字,又可以動態的插入圖片的功能.

今天在做類似於qq那樣的評論功能時,束手無策,在網上到處找答案,最后在一個很小很小的角落里受到了啟發.認識了一個新的東西contenteditable.

html代碼如下:

<div id="guo" style="width:500px; height:200px; border:1px solid red"  contenteditable="true">
    <img src="qqface/1.gif" />
    </div>
 <input type="button" value="插入" onclick="insert()" />

js代碼:

function insert() {
            $("#guo").append("<img src='qqface/2.gif' />");
        }

操作前的界面:

點擊插入后的界面:

 輸入文字,並且插入的圖片還可以復制,從一個輸入框復制到另外一個輸入框.

收工.