可插入图片的TEXT文本框

今天在做类似于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' />");
        }

操作前的界面:

点击插入后的界面:

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

收工.

赞 (0)

相关推荐

  • 可插入图片的TEXT文本框

    可插入图片的TEXT文本框

    今天在做类似于qq那样的评论功能时,束手无策,在网上到处找答案,最后在一个很小很小的角落里受到了启发.认识了一个新的东西contenteditable. html代码如下: 复制代码 代码如下: <div id="guo" style="width:500px; height:200px; border:1px solid red"  contenteditable="true">    <img src="qqfac

  • jquery+ajax+text文本框实现智能提示完整实例

    jquery+ajax+text文本框实现智能提示完整实例

    本文实例讲述了jquery+ajax+text文本框实现智能提示的方法.分享给大家供大家参考,具体如下: 模仿百度查询的智能提示 先看看效果图: 代码部分: CSS代码: <style type="text/css"> #searchresult { width: 130px; position: absolute; z-index: 1; overflow: hidden; left: 130px; top: 71px; background: #E0E0E0; bord

  • 解析Java图形化编程中的文本框和文本区

    在图形界面中,文本框和文本区是用于信息输入输出的组件. 文本框 文本框(JTextField)是界面中用于输入和输出一行文本的框.JTextField类用来建立文本框.与文本框相关的接口是ActionListener. 文本框处理程序的基本内容有以下几个方面: 声明一个文本框名. 建立一个文本框对象. 将文本框对象加入到某个容器. 对需要控制的文本框对象注册监视器,监听文本框的输入结束(即输入回车键)事件. 一个处理文本框事件的方法,完成对截获事件进行判断和处理. JTextField类的主要构

  • 表单类各种类型(文本框)失去焦点效果jquery代码

    复制代码 代码如下: <SPAN style="FONT-SIZE: 18px">表单类失去焦点的效果</SPAN> 复制代码 代码如下: <script type="text/javascript"> $(function(){ $(":input").focus(function(){ //此处可获取各种表单如(:text/:button) $(this).addClass("focusa&quo

  • 浅谈java中文本框和文本区

    在图形界面中,文本框和文本区是用于信息输入输出的组件. 文本框 文本框(JTextField)是界面中用于输入和输出一行文本的框.JTextField类用来建立文本框.与文本框相关的接口是ActionListener. 文本框处理程序的基本内容有以下几个方面: 1.声明一个文本框名. 2.建立一个文本框对象. 3.将文本框对象加入到某个容器. 4.对需要控制的文本框对象注册监视器,监听文本框的输入结束(即输入回车键)事件. 5.一个处理文本框事件的方法,完成对截获事件进行判断和处理. JText

  • css样式之区分input是按钮还是文本框的方法第1/4页

    当你看到<input>这个html标签的时候,你会想到什么?一个文本框?一个按钮?一个单选框?一个复选框?--对,对,对,它们都对.也许你可能想不到,这个小小的input竟然可以创造出10个不同的东西,下面是个列表,看看,哪些是你没有想到的:<input type="text" /> 文本框 <input type="password" /> 密码框 <input type="submit" />

  • JavaScript如何实现在文本框(密码框)输入提示语

    有时候我们需要在登陆表单有一些提示语言,比如"请输入用户名"和"请输入密码"等语言,至于用户名好说,但是在密码框中出现"请输入密码"这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示.如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的.所以就得想其他办法,代码如下: <!DOCTYPE html> <html> <head&g

  • javascript自动恢复文本框点击清除后的默认文本

    本文实例介绍了点击文本框清除默认文本离开再恢复的js实例代码,分享给大家供大家参考,具体内容如下 相关知识: 1.onclick事件的定义和用法: 当点击对象的时候会触发此事件. 浏览器支持: 1).IE浏览器支持此事件. 2).火狐浏览器支持此事件. 3).Opera浏览器支持此事件. 4).谷歌浏览器支持此事件. 5).safria浏览器支持此事件. 实例代码: <html> <head> <meta charset="gb2312"/> <

  • Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

    Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义

    本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下 1.安装 npm install vue-quill-editor --save 2.在main.js中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quil

  • vue富文本框（插入文本、图片、视频）的使用及问题小结

    今天在vue里面插入富文本遇到了一些小坑在这里提供给大家用于参考,如有错误,望多加指正. 我这里使用的是Element-ui的上传图片组件 首先引入Element-ui(这个我就不作赘述了,详情参考element中文官网) 在引入富文本组件vue-quill-editor 使用在main.js引入相应的样式 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/

随机推荐