Heim >Web-Frontend >js-Tutorial >可插入图片的TEXT文本框_javascript技巧

可插入图片的TEXT文本框_javascript技巧

WBOY
WBOYOriginal
2016-05-16 17:06:351961Durchsuche

今天在做类似于qq那样的评论功能时,束手无策,在网上到处找答案,最后在一个很小很小的角落里受到了启发.认识了一个新的东西contenteditable.

html代码如下:

复制代码 代码如下:


    可插入图片的TEXT文本框_javascript技巧
   

 

js代码:

复制代码 代码如下:

function insert() {
            $("#guo").append("可插入图片的TEXT文本框_javascript技巧");
        }

操作前的界面:

可插入图片的TEXT文本框_javascript技巧

点击插入后的界面:

可插入图片的TEXT文本框_javascript技巧

输入文字,并且插入的图片还可以复制,从一个输入框复制到另外一个输入框

可插入图片的TEXT文本框_javascript技巧

收工.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn