可插入图片的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 相关文章推荐
jquery 图片轮换效果
Jul 29 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
vue实现商城秒杀倒计时功能
Dec 12 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
isset和empty的区别
2007/01/15 PHP
php header()函数使用说明
2008/07/10 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
php设计模式 Prototype (原型模式)代码
2011/06/26 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
iframe实用操作锦集
2014/04/22 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
让网站自动生成章节目录索引的多个js代码
2018/01/07 Javascript
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python import用法以及与from...import的区别
2015/05/28 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
Python占用的内存优化教程
2019/07/28 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
navabi英国:设计师大码女装
2019/06/25 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
大学校园活动策划书
2014/02/04 职场文书
四风对照检查材料范文
2014/09/27 职场文书
租车协议书范本2014
2014/11/17 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
酒店厨房管理制度
2015/08/06 职场文书