可插入圖片的TEXT文本框
更新時(shí)間：2013年12月27日 14:59:38 作者：
這篇文章主要介紹了可插入圖片的TEXT文本框，有需要的朋友可以參考一下
今天在做類似于qq那樣的評(píng)論功能時(shí),束手無(wú)策,在網(wǎng)上到處找答案,最后在一個(gè)很小很小的角落里受到了啟發(fā).認(rèn)識(shí)了一個(gè)新的東西contenteditable.
html代碼如下:
復(fù)制代碼 代碼如下:
<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代碼:
復(fù)制代碼 代碼如下:
function insert() {
$("#guo").append("<img src='qqface/2.gif' />");
}
操作前的界面:
點(diǎn)擊插入后的界面:
輸入文字,并且插入的圖片還可以復(fù)制,從一個(gè)輸入框復(fù)制到另外一個(gè)輸入框
收工.
相關(guān)文章
JavaScript常用數(shù)組去重的方法及對(duì)比詳解
數(shù)組去重在面試和工作中都是比較容易見(jiàn)到的問(wèn)題。這篇文章主要是來(lái)測(cè)試多個(gè)方法，對(duì)下面這個(gè)數(shù)組的去重結(jié)果進(jìn)行分析討論，需要的可以參考一下2022-07-07
這篇文章主要介紹了JS中的繼承操作,結(jié)合實(shí)例形式總結(jié)分析了JS中的原型鏈繼承、構(gòu)造函數(shù)繼承、組合繼承、class繼承等常見(jiàn)繼承操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-06-06
javascript模版引擎-tmpl的bug修復(fù)與性能優(yōu)化分析
在平時(shí)編碼中，經(jīng)常要做拼接字符串的工作，如把json數(shù)據(jù)用HTML展示出來(lái)，以往字符串拼接與邏輯混在在一起會(huì)讓代碼晦澀不堪，加大了多人協(xié)作與維護(hù)的成本。而采用前端模板機(jī)制就能很好的解決這個(gè)問(wèn)題2011-10-10
JavaScript 基礎(chǔ)表單驗(yàn)證示例(純Js實(shí)現(xiàn))
下面小編就為大家?guī)?lái)一篇JavaScript 基礎(chǔ)表單驗(yàn)證示例(純Js實(shí)現(xiàn))。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
最近使用dwz來(lái)做項(xiàng)目，有時(shí)候在ajax的時(shí)候并不想使用dwz的loading，不知道有什么方法可以去掉嗎，下面為大家詳細(xì)介紹下具體的去掉方法2013-05-05
這篇文章主要介紹了TypeScript中的函數(shù)，一般JavaScript中的函數(shù)定義常用的有使用function關(guān)鍵字聲明函數(shù)、使用字面量方式聲明函數(shù)、使用箭頭函數(shù)聲明函數(shù)等幾種函數(shù)，下面我們大家就一起進(jìn)入文章了解這些函數(shù)的具體定義吧,需要的朋友可以參考一下2021-12-12
通過(guò)JS判斷聯(lián)網(wǎng)類型和連接狀態(tài)的實(shí)現(xiàn)代碼
這篇文章主要介紹了通過(guò)JS判斷聯(lián)網(wǎng)類型和連接狀態(tài)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-04-04
只需五句話搞定JavaScript作用域(經(jīng)典)
javascript作用域是前端開(kāi)發(fā)比較難理解的知識(shí)點(diǎn)，下面小編給大家提供五句話幫助大家很快的了解js作用域，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-07-07 
詳解maxlength屬性在textarea里奇怪的表現(xiàn)
這篇文章主要介紹了maxlength屬性在textarea里奇怪的表現(xiàn)的相關(guān)資料,需要的朋友可以參考下
2015-12-12