可插入圖片的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í)獲取表單數(shù)據(jù)的示例代碼
本文介紹了五種在JavaScript中獲取表單數(shù)據(jù)的方法：使用FormData對(duì)象、手動(dòng)提取表單數(shù)據(jù)、使用querySelector獲取單個(gè)字段數(shù)據(jù)、序列化為查詢字符串和配合AJAX提交表單數(shù)據(jù),每種方法都有示例代碼,幫助開(kāi)發(fā)者更好地理解和應(yīng)用2025-02-02
javascript實(shí)現(xiàn)倒計(jì)時(shí)（精確到秒）
本文給大家分享的是個(gè)人項(xiàng)目中使用的javascript實(shí)現(xiàn)的精確到秒級(jí)的倒計(jì)時(shí)代碼，十分的實(shí)用，有需要的小伙伴可以參考下。2015-06-06
JS實(shí)現(xiàn)簡(jiǎn)單移動(dòng)端鼠標(biāo)拖拽
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單移動(dòng)端鼠標(biāo)拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
基于canvas實(shí)現(xiàn)超炫酷的流水燈效果
這篇文章主要為大家詳細(xì)介紹了基于canvas實(shí)現(xiàn)超炫酷的流水燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
js判斷運(yùn)行jsp頁(yè)面的瀏覽器類型以及版本示例
做了一個(gè)判斷瀏覽器類型和版本號(hào)的業(yè)務(wù)，記錄下相關(guān)的js代碼，個(gè)人感覺(jué)還不錯(cuò)，需要的朋友可以參考下2013-10-10
今天小編就為大家分享一篇Layui數(shù)據(jù)表格之單元格編輯方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
js+html5實(shí)現(xiàn)可在手機(jī)上玩的拼圖游戲
這篇文章主要介紹了js+html5實(shí)現(xiàn)可在手機(jī)上玩的拼圖游戲,涉及javascript結(jié)合html5進(jìn)行圖形操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
JavaScript canvas實(shí)現(xiàn)九宮格切圖效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)九宮格切圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09 
這篇文章主要介紹了詳解微信小程序軌跡回放實(shí)現(xiàn)及遇到的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02