可插入图片的TEXT文本框


Posted in Javascript onDecember 27, 2013

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

操作前的界面:

可插入图片的TEXT文本框

点击插入后的界面:

可插入图片的TEXT文本框

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

可插入图片的TEXT文本框

收工.

Javascript 相关文章推荐
页面版文本框智能提示JS代码
Nov 20 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
jQuery实现增删改查
Dec 22 jQuery
jQuery拖拽 &amp; 弹出层 介绍与示例
Dec 27 #Javascript
JS字符串截取函数实例
Dec 27 #Javascript
js 对小数加法精度处理示例说明
Dec 27 #Javascript
js 处理数组重复元素示例代码
Dec 27 #Javascript
js对table的td进行相同内容合并示例详解
Dec 27 #Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 #Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 #Javascript
You might like
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
用python代码做configure文件
2014/07/20 Python
python中zip()方法应用实例分析
2016/04/16 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
Python从函数参数类型引出元组实例分析
2019/05/28 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
python如何绘制疫情图
2020/09/16 Python
python lambda的使用详解
2021/02/26 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
自荐书4要点
2014/01/25 职场文书
公司捐款倡议书
2014/05/14 职场文书
2014年网管工作总结
2014/12/11 职场文书
高中开学感言
2015/08/01 职场文书
python - asyncio异步编程
2021/04/06 Python
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS