contenteditable

IOS中div contenteditable=true无法输入

在IOS中<div contenteditable="true"></div>中点击时可以弹出键盘但是无法输入.加一个样式-webkit-user-select:text就可以了.…

苹果手机IOS中div contenteditable=true 仿文本域无法输入编辑

问题: 在苹果手机IOS中 contenteditable="true" 做文本域输入,点击可以弹出键盘但是无法输入,安卓都正常. 经测试后,记得加一个样式 -webkit-user-select:text 就可以了.…

H5之contenteditable

场景: <div id='content' contenteditable='true' > hello </div> <button id='caret'>设置光标位置</button> 需求:点击按钮,把插入符放到文本‘hello’的后面或前面,像这样 //后面 hello| //前面 |hello 并兼容主流浏览器解决: function placeCaret(el, atStart) { el.focus(); if (typeof window.…

contentEditable属性设置是否可编辑元素的内容

在HTML5中在标签新添加了一个属性contentEditable可以设置标签内的内容是否可以编辑: 设置contenteditable="true"标签内的元素(内容)可以编辑 <!DOCTYPE HTML> <html> <body> <div contenteditable="true">这是一段可编辑的段落.请试着编辑该文本.</div> <p contenteditable="tr…

http://www.w3school.com.cn/tags/att_global_contenteditable.asp 做编辑器经常用这个属性使得整个编辑区域所见所得 http://www.cnblogs.com/cskk/archive/2013/03/30/divs.html 这两天在研究编辑器的代码,这个所见即所得这个功能是怎么实现的,想了我好久一按开始我看的是FCKEditor的代码后来没想通再后来我又去看SCEditor的代码发现都有contenteditable这个属…

div contenteditable placeholder

contenteditable型的编辑框,实现placeholder的方式有两种第一种,Css的实现方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .content{ width:380px; height:50px; border:…

div的contenteditable和placeholder蹦出的火花

今天在做手机端发布描述内容时,需要实现换行,还需要有plachholder. 在文本框中换行自然想到了textarea. 问题似乎已经解决了,但是当内容发布后,在html中显示换行都丢失了. 这个时候就用到了contenteditable和placeholder <div class="con" contenteditable="true" pla…

Text selection in div(contenteditable) when double click

背景: 在最近项目中,碰到一个问题:有一个可编辑的div需要双击时可编辑,blur或者回车时将编辑结果保存.你可能注意到双击时,文字会被选中,可编辑区域不会focus到光标位置.考虑到兼容性问题,写了如下代码.做个备份,以备不时之需. js: function getMouseEventCaretRange(evt) { var range, x = evt.clientX, y = evt.clientY; // Try the simple IE way first if (document…

html contenteditable

contenteditable 是html中的一個屬性,在HTML中,某些元素設置 contenteditable='true' 屬性時可以開啟該元素的編輯模式,contenteditable 可以讓div 或整個網頁,或者span等等元素設置為可寫,我們最常用的是 input .textarea 文本輸入元素來輸入內容,但這些也只能夠輸入純文本,而 contenteditable 開啟後能夠輸入html內容. 如果想在整個網頁可編輯,請在 body 標籤內設置 contenteditable…

contenteditable 属性

定义和用法 contenteditable 属性规定是否可编辑元素的内容. 语法 <element contenteditable="value"> 属性值值描述 true 规定可以编辑元素内容. false 规定无法编辑元素内容. classname 继承父元素的 contenteditable 属性. 支持IE系列和最新浏览器实例: /**宽度固定,自动换行,内容超出滚动条显示***/ .divOne { width: 300px; height: 200px;…

HTML5它contenteditable属性

HTML5它contenteditable属性 1.功能说明 (1)功能:同意用户编辑元素中的内容 (2)说明:是一个布尔值.false是不能编辑,true为可编辑 2.分析实例 (1)contenteditable属性为false <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>contentEditable</title> </head> <u…

可编辑DIV （contenteditable="true"）在鼠标光标处插入图片或者文字

近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情出来了,当编辑框失去焦点时候,再插入图片时候总是插入在最前面(谷歌和火狐,IE没问题).还没搞定,,, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/…

contenteditable模仿textarea文本框

contenteditable 属性是 HTML5 中的新属性. 例子:<p contenteditable="true" style=" border:solid 1px #333; width:100px;word-wrap: break-word; outline:none;">这是一段可编辑的段落.请试着编辑该文本.</p> 1. 解决火狐和ie下的不换行问题 : word-wrap: break-word; 2.去掉光标效果: ou…

contenteditable实现可编辑的HTML标签

最近工作中遇到了一个小问题,让我学到了新的标签属性--contenteditable. 我需要实现的是手机端界面,特别简单的一个页面,如下图: 在我脑海里第一时间想到的应该就是一个form表单然后里面包裹着一个textarea标签这么简单吧,心想着这个界面顶多用十分钟就能搞定. 然后打开编辑器我就开始写了,代码如下: <form class='textbox' action="" method="post"> <textarea name=&quo…

HTML5之contenteditable属性

HTML5之contenteditable属性 1.功能说明 (1)功能:允许用户编辑元素中的内容 (2)说明:是一个布尔值,false是不能编辑,true为可编辑 2.分析实例 (1)contenteditable属性为false <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>contentEditable</title> </head> <u…

contenteditable 插入及粘贴纯文本内容

本文主要介绍 div 标签设置 contenteditable = ' true ' 时,在光标位置插入输入的内容,或在光标位置粘贴纯文本内容.文中涉及知识,可参考以下: http://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/ http://www.jb51.net/article/57650.htm https://www.cnblogs.com/rainman/archive/2011/02/2…

<div>标签仿<textarea>。contentEditable=‘true’，赋予非表单标签内容可以编辑

需求:web页面需要一个文本输入框.1.该文本输入框默认状态下有个仿‘placeholder’的默认文本提示信息,2.文本框输入状态下其高度会随文本内容自动撑开. 方案选择:1.使用<textarea>标签.但是标签高度不会随文本高度自动撑开,而是出现滚动条.使用JS动态计算文本内容高度赋予<textarea>标签高度. 2.使用<div>或者<p>.<span>等非表单标签,通过赋予其contentEditable='true'属性,是其获得内…

html5 contenteditable 实现table可编辑（网页版EXCEL）

一直想找一个免费的网页版的EXCEL插件,以便于多人共同在线编辑,始终没发现合适的. 其实自己实现类似功能也不难.参考:https://blog.csdn.net/chadcao/article/details/52014730 直接将以下代码存在本地目录中,如A.html,双击在浏览器中打开,即可对姓名字段进行编辑. <!doctype html> <html> <head> <title>table contenteditable</title…

使用contenteditable=true的div模拟textarea（vue2.0中使用，带placeholder且高度自动撑开）

子组件: <template> <div class="item-address"> <span v-show="!hasAddress" class="address-placeholder">请输入详细地址</span> <div contenteditable="true" v-html="innerText" @input="chang…

H5新增属性contenteditable（不用JS，实现div模拟textarea高度自增长）

无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea(文本域),让textrarea的高度随内容的增加而自动增加.当时就惊呆了,居然还有这种操作!!! <div id="textarea" contenteditable="true"></div> 原文博客 contenteditable属性介绍:…

contenteditable元素的placeholder输入提示语设置

在某些情况下,textarea是不够用的,我们还需要显示一些图标或者高亮元素,这就需要用富文本编辑器,而富文本编辑器本质上是HTML元素设置了contenteditable. 然后可能需要像input.textarea有placeholder的输入提示语,但contenteditable的元素,placeholder是没用的,需要另外办法. 例子: HTML: <div class="con" contenteditable="true"></di…

关于 div 的 contenteditable 使用，placeholder 和复制图片显示并上传，按住 enter+ctrl 内容换行

当使用文本编辑的时候,首先会使用 textarea ,但是,这个里面不能加入其它标签,也就是不能富文本化. 于是可以使用 contenteditable 就是给 div 加上该属性.就变得丰富起来.使用的时候,发现有两个问题. 1.placeholder 无法正常使用,解决办法,是加上一段css: .con:empty:before{ content: attr(placeholder); color:#bbb; } .con:focus:before{ content:none; } 2.复制…

关于contenteditable属性

今天刷刷看看,看到了发说说框,发现居然不是textarea的,百思不得其解围.后来看到contenteditable,心想应该就是这个搞怪的吧,百度了下.w3c的解释是contenteditable属性规定元素内容是否可编辑.里面只有true或者false;默认false,加个true后,div.p.等等非输入标签都是可以输入.而且主流浏览器都是支持,包括IE7…

DIV仿textarea文本域，contenteditable如何只能输入纯文本

对于支持HTML5浏览器有2种方法: 1. HTML5 <div contenteditable="plaintext-only"></div> 2. CSS3 user-modify: read-write-plaintext-only; -webkit-user-modify: read-write-plaintext-only 非HTML5浏览器,参考以下JS 总结参考:http://www.cnblogs.com/sheshou/p/5416885.h…

contenteditable="true"让div可编辑

今天才知道有这个属性,真是out了. 不过以前一直没做编辑器有关的,毕竟开源的很多. 现在觉得开源的也不是这么好用,自己写写简单的吧用了 <div class="content-box" contenteditable="true"> 我们就能在这个div内部进行编辑了. 有人要问了,有textarea,还需要这个吗当然,用它的好处就是能插入标签. 比如说图片和视频标签配合Jquery的html方法就能获取里面的内容了 var content=$(…

怎么控制contenteditable的输入

contenteditable是所有流浪器都支持的属性, 可以利用标签模拟文本域, 实现体验相当不错的内容跟着高度自动增高的体验, 但是也带来一些问题, 就是可以直接复制带有style样式的标签进去之前有看到过文章过滤HTML的方法, 就是在复制进去后将HTML过滤掉, 这样做的问题是过滤的标签多了之后,会有很明显的感觉, 还有就是, 当光标的位置发生变化之后, 会导致位置不正确控制contenteditable只能输入纯文本才是一种比较好的体验一. 用CSS控制一个div标签要让其可编…

contenteditable设置元素可编辑

需求背景实现一个输入框,高度可以随着输入文字的增加而自动增高有placeholder,输入为空时,显示placeholder 我们知道可以将div的contenteditable设置伪true,将其变为可输入状态.代码如下: <div contenteditable="true"></div> 这样就满足了我们的第一个需求——高度自适应.但是在手机上测试会发现第一个问题,iOS上面无法输入.经过查找资料,发现只需要为其添加如下样式即可: div{ user-…

div设置contenteditable="true" 光标消失：原因

原因1:document.onselectstart= function(){return false;}; 原因2:父层设置了user-select:none 导致子层设置了 contenteditable 会出现异常,但是在ie和chrome并没有体现出来如果把编辑框换成input标签不会由于禁止文本选中而出现光标消失的情况了,可以自己尝试 <!DOCTYPE html> <html lang="en"> <head> <meta ch…

JavaScript模拟QQ签名(HTML5 contenteditable属性)

例图: 一.思路 1.单击元素时,使元素可以编辑,并获得焦点 2.按下键盘检测用户编辑元素中的文本 3.监听按下Enter键操作或离开可编辑元素焦点时,更新数据库二.代码 $(function(){ // return obj { length: 字节长度, limitStr: 限定的字符串(字节长度小于等于intVal) } function getStringByteInfo ( string, intVal ) { var str = $.trim(string) || '', leng…

document.execCommand & contenteditable

document.execCommand & contenteditable https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/contenteditable demo click copy https://codepen.io/webgeeker/pen/XOJaEP &l…

【contenteditable】的更多相关文章