可插入圖片的TEXT文本框
更新時間:2013年12月27日 14:59:38 作者:
這篇文章主要介紹了可插入圖片的TEXT文本框,有需要的朋友可以參考一下
今天在做類似于qq那樣的評論功能時,束手無策,在網(wǎng)上到處找答案,最后在一個很小很小的角落里受到了啟發(fā).認識了一個新的東西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' />");
}
操作前的界面:
點擊插入后的界面:
輸入文字,并且插入的圖片還可以復制,從一個輸入框復制到另外一個輸入框
收工.
相關文章
javascript模版引擎-tmpl的bug修復與性能優(yōu)化分析
在平時編碼中,經(jīng)常要做拼接字符串的工作,如把json數(shù)據(jù)用HTML展示出來,以往字符串拼接與邏輯混在在一起會讓代碼晦澀不堪,加大了多人協(xié)作與維護的成本。而采用前端模板機制就能很好的解決這個問題2011-10-10JavaScript 基礎表單驗證示例(純Js實現(xiàn))
下面小編就為大家?guī)硪黄狫avaScript 基礎表單驗證示例(純Js實現(xiàn))。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07通過JS判斷聯(lián)網(wǎng)類型和連接狀態(tài)的實現(xiàn)代碼
這篇文章主要介紹了通過JS判斷聯(lián)網(wǎng)類型和連接狀態(tài)的實現(xiàn)代碼,需要的朋友可以參考下2015-04-04只需五句話搞定JavaScript作用域(經(jīng)典)
javascript作用域是前端開發(fā)比較難理解的知識點,下面小編給大家提供五句話幫助大家很快的了解js作用域,非常不錯,具有參考借鑒價值,感興趣的朋友一起學習吧2016-07-07詳解maxlength屬性在textarea里奇怪的表現(xiàn)
這篇文章主要介紹了maxlength屬性在textarea里奇怪的表現(xiàn)的相關資料,需要的朋友可以參考下2015-12-12