DNA图谱 / 问答 / 问答详情

如何让contenteditable元素只能输入纯文本 00 张鑫旭

2023-07-26 10:36:40
TAG: 元素
共1条回复
血莲丿红尘

一、温故而知新

很多年以前,稍等,让我搜一下contenteditable(右上角),哈,是2010年的时候,写了篇文章“div模拟textarea文本域轻松实现高度自适应”,就是说的contenteditable的应用。

虽然说,利用全浏览器都支持的contenteditable模拟文本域可以实现体验相当不错的高度跟随内容自动撑开的效果,但是呢,有个很大的问题就是HTML内容可以直接被粘贴进去,如下图所示:

之前的文章提到过过滤HTML的方法,保证内容都是纯文本。然而,这种方法的问题在于:

粘贴完毕到过滤结束有时间差,用户很看到内容一闪而过的糟糕体验;

光标的位置会发生变化,不是之前focus的位置了;

当年的我图样图森破,所以,只有上面这种程度。实际上,控制contenteditable元素只能输入纯文本是有体验比较好的方法的。

二、与contenteditable属性无关的CSS控制法

一个div元素,要让其可编辑,也就是可读写,contenteditable属性是最常用方法,做前端的基本上都知道。但是,知道CSS中有属性可以让普通元素可读写的的同学怕是就少多了。

主角亮相:user-modify.

支持属性值如下:

user-modify: read-only;

user-modify: read-write;

user-modify: write-only;

user-modify: read-write-plaintext-only;

其中,write-only不用在意,当下这个年代,基本上没有浏览器支持,以后估计也不会有。read-only表示只读,就是普通元素的默认状态啦。然后,read-write和read-write-plaintext-only会让元素表现得像个文本域一样,可以focus以及输入内容。

您可以狠狠地点击这里:CSS user-modify属性行为表现demo

会发现,设置了read-write和read-write-plaintext-only值的两个<p>标签元素是可以被focus的:

而这两者的区别就在于,一个可以输入富文本,而下面一个只能输入纯文本,例如,我们从某网页同时复制一段内容粘贴进去看看:

好了,至此,本文标题的答案实际上就已经有了。也就是给元素设置:

user-modify: read-write-plaintext-only

就可以让元素既可以编辑,也只能输入纯文本,表现得就跟textarea文本域一样。

是不是很酷啊!然而,抱歉地跟大家讲下,目前只有webkit内核浏览器才支持read-write-plaintext-only这个值,因此,我们的使用其实是:

-webkit-user-modify: read-write-plaintext-only

我们可以在移动端使用,以及,只需要兼顾webkit内容的桌面网页项目。

三、使用标准contenteditable属性值的HTML控制法

咳咳,提问:在HTML中,contenteditable支持的属性值是?

图样图森破时候的我,脑中就只有contenteditable="true"和contenteditable="false",科科,后来我发现自己太天真了,新的草案中明确表示还有多个其他属性值:

The contenteditable attribute is an enumerated attribute

whose keywords are the empty string (“”), “events”, “caret”, “typing”,

“plaintext-only”, “true”, and “false”. There is one additional state,

the inherit state, which is the missing value default (and the invalid

value default).

垂直展示下就是(不包括默认的inherit继承):

contenteditable=""

contenteditable="events"

contenteditable="caret"

contenteditable="plaintext-only"

contenteditable="true"

contenteditable="false"

别问我,我也不知道"events"和"caret"是干什么用的,嘿,但是"plaintext-only"我是知道的,可以让编辑区域只能键入纯文本。这里就不需要demo了,直接下面的框框,大家可以试试,看看能不能搞富文本。

<div contenteditable="plaintext-only"></div>

如果您发现,居然出乎意料,可以弄进去富文本,那说明你使用的是非Chrome之流的浏览器。

换句话说,contenteditable="plaintext-only"和CSS只的-webkit-user-modify: read-write-plaintext-only一样,目前仅仅是Chrome浏览器支持比较好的。

所以,您的项目如果还有很多IE8浏览器的用户,我只能替你惋惜,美妙的东西无法立即用上,不得已,寻求下面的方法。

四、控制粘贴paste事件的JS控制法

如果我们单纯地敲击键盘,输入的内容实际上都是纯文本。除了一些特殊情况,例如IE浏览器下的编辑框会自动把合乎条件的url地址自动加上链接。富

文本污染的情况主要出现在复制粘贴的时候,于是,如果我们能在粘贴的时候,对剪切板中的内容进行HTML过滤,再手动插入内容,岂不就可以完美解决无法输

入富文本的问题了吗

相关推荐

contenteditable怎么读

英文原文:content editable英式音标:[ku0259nu02c8tent] editable 美式音标:[u02c8kɑntu025bnt] editable
2023-07-25 13:14:412

怎么获取contenteditable内容

代码如下:<div id="div1" style=" height:20px; border:solid 1px #999" onClick="check(this)" contentEditable=true>XXXXXX</div>innerHTML 获取 XXXXXXouterHTML 获取 <div id="div1" style=" height:20px; border:solid 1px #999" onClick="check(this)" contentEditable=true>XXXXXX</div> 假如div中包含元素可用childNodes[Index]属性获取。
2023-07-25 13:14:481

在web开发里 js如何获取获取div 的contentEditable内容 用于再提交

这个属性只是让该元素获得编辑的功能,而要获取这个div的内容,同样用document.getElementById("id").innerHTML;即可
2023-07-25 13:14:581

html 里面 contenteditable 里面的div块

你的代码可真怪!contenteditable="true"是为了把div作为富文本编辑器时设置的属性,一般设置这个属性的div的内部是不添加任何其它元素的。你让div可编辑又让div做容器,你是要实现何种奇特功能?
2023-07-25 13:15:121

div设置contenteditable="true",即可编辑,但无法去除从网页粘贴过来内容的格式

你可以在记事本里面粘贴过一篇,再粘贴过去,从网页或word上复制下来的内容都带有自动生成的HTML代码的,从记事本里面可以把这些杂的东西去掉
2023-07-25 13:15:205

html全局属性有哪些

html全局属性:属性 描述accesskey 规定激活元素的快捷键。 class 规定元素的一个或多个类名(引用样式表中的类)。 contenteditable 规定元素内容是否可编辑。 contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 data-* 用于存储页面或应用程序的私有定制数据。 dir 规定元素中内容的文本方向。 draggable 规定元素是否可拖动。 dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。 hidden 规定元素仍未或不再相关。 id 规定元素的唯一 id。 lang 规定元素内容的语言。 spellcheck 规定是否对元素进行拼写和语法检查。 style 规定元素的行内 CSS 样式。 tabindex 规定元素的 tab 键次序。 title 规定有关元素的额外信息。 translate 规定是否应该翻译元素内容。
2023-07-25 13:15:351

如何让contenteditable的div 在点击其他div的时候不失焦

将DIV对象的contenteditable属性设置为true之后,再插入一个表格,就能编辑了.代码如下: abc function doit(){ var abc=document.getElementById("abc"); abc.contentEditable=true; abc.innerHTML+=" " }
2023-07-25 13:15:421

7.修改好后再将下面代码输进地址栏javascript:document.body.content

javascript:document.body.contentEditable="true";这就是给body标签设置了contentEditable属性为true,也就是说body标签下的内容都被设置成了可编辑状态。就是说页面可以随便改,但仅仅是当前页面,刷新后就恢复原样。
2023-07-25 13:15:491

html制作的表格怎样使其完成后可以输入内容

html表格只是作为显示数据的一种形式,你要做到能在其中填写数据,必须在相对应的td行内添加input标签,input=text标签是专门的文本输入框标签,添加后你就可以在相应的table中td行内进行写数据了
2023-07-25 13:15:584

jquery一个div怎么获得焦点和失去焦点?

DIV获取焦点有两种方法:DIV直接使用focus()和blur()两个方法是无效的,需添加tabindex="0contenteditable="true"属性,设置div为可编辑状态,则可点击获取焦点,同时div的内容也是可以编辑的,设置div的tabindex,此时div的内容是不可编辑的。PS:设置tabindex属性,按键盘Tab键可让其获取焦点,其中tabindex的值越小在tab键切换的时候就会首先聚焦
2023-07-25 13:16:382

“textarea”里面输入“html标签”怎么按原样输出?

1、录入以后再使用textarea编辑时与最初录入时不一致,还是说想要把标签解析后显示呢?如果是前一种情况,通常可以用后端脚本将HTML敏感字符转换为HTML实体字符。2、比如<,>,&等字符,后一种情况用textarea是无法实现的,因该控件只能显示纯文本内容,如果想要显示解析后的网页元素,可以用其它元素模拟,比如DIV等。3、<div contenteditable="true" id="t"></div>吧div加上contenteditable="true" 就会变成一个可编辑div,可以试试下面试试 鼠标放上去正常是和文本没区别 不过能加html标签div contenteditable="true" style="background:#000; color:#FFF; width:233px;height:233px;"><span style="color:red;">233333</span><span style="color:green;">原谅绿</span>aaaaaaaaaaaaaa</div>
2023-07-25 13:16:471

在contenteditable的div中怎样获取光标距离页面顶端的偏移量和当前光标的位置

div里可以定光标吗?下面两个方法可以获取鼠标在div 的位置坐标,希望你可以用得上 function getX(obj) { var parObj = obj; var left = obj.offsetLeft; while (parObj = parObj.offsetParent) { left += parObj.offsetLeft; } return left; } function getY(obj) { var parObj = obj; var top = obj.offsetTop; while (parObj = parObj.offsetParent) { top += parObj.offsetTop; } return top; }
2023-07-25 13:16:541

手机怎么直接修改网页上的内容?

用chrome浏览器,保存一下JavaScript代码为书签,在需要修改的页面,地址栏搜索书签名称,点击即可编辑页面。javascript:document.body.contentEditable%20=%20"true";%20document.designMode="on";%20void%200
2023-07-25 13:17:026

如何更改chrome 页面信息

在Chrome中任意一个网页的标签页下按F12.在下方弹出开发者工具面板.然后点击Console控制台选项卡然后输入:document.body.contentEditable = "true"按下回车,现在你就可以任意编辑网页了(可以做做恶作剧哦..)这句命令就是将当前显示的网页的body(显示内容)的可编辑状态设置为可编辑.当然编辑完后也可以关闭可编辑状态在刚刚那个Console控制台下输入:document.body.contentEditable = "false"按下回车,网页又不能编辑了,恢复正常状态了
2023-07-25 13:17:221

求可以随意改网页代码!

随意改网页代码代码如下:1、javascript:document.body.contentEditable="true"; document.designMode="on";!msn1dai2、javascript:document.body.contentEditable="true"; document.designMode="on"; void 0把上面的代码复制、粘贴到任何页面的网址栏里面运行,想停下来的话,就重新刷新一下页面。扩展资料网页代码,就是指在网页制作过程中需要用到的一些特殊的“语言”,设计人员通过对这些“语言”进行组织编排制作出网页,然后由浏览器对代码进行“翻译”后才是我们最终看到的效果。制作网页时常用的代码有HTML,JavaScript,ASP,PHP,CGI等,其中超文本标记语言(标准通用标记语言下的一个应用、外语简称:HTML)是最基础的网页代码。参考资料:百度百科-网页代码
2023-07-25 13:17:393

黄色系列有哪些色彩?

黄色系列共有十三种色彩:1、柠檬黄(Lemon yellow)是一种柠檬表皮的颜色,黄中泛着草绿色。2、金丝雀色(Canary)这是一种和金丝雀羽毛的颜色一样清新明亮的黄色。3、铬黄色(Chrome yellow)Chromium源于古希腊语khroma,用来表述颜色时指的是用铬制作的黄色颜料。它的表述范围很广,从纯粹的黄色到泛红的黄色都可以表述,近来用于指称泛红色的黄色。4、芥末色(Mustard)这是一种纯度较低、比较浓重的黄色。5、土黄色(Yellow ochre)Ochre是黄土的意思,这里指的是黄土一样的颜色。6、麦秆色(Straw)干枯的秸秆的颜色,纯度较低的黄色。7、古铜色(Bronze)Bronze是青铜的意思,但在色彩中指的是泛黄色的亮褐色。8、暗黄皮革色(Buff)Buff的意思是黄色的牛皮或鹿皮,这是一种泛黄色的浅褐色。9、裸色(Beige)法语Beige意思是未经漂白的羊毛色,现在作为固定名词,用来指低纯度的亮黄色。10、象牙色(Ivory)古希腊语中的Ivory意为象牙,这是一种较亮的裸色,已近乎接近纯白。11、亚麻色(Ecru)法语中的ecru是未进行漂白的意思,用来指称未进行漂白的亚麻的颜色。12、棕土色(Burnt umber)棕土是一种天然的矿物颜料,用来表述一种类似栗色的泛红色的深褐色。13、凡·戴克棕(Vandyke brown)因弗兰德斯的画家凡·戴克经常使用而得名,是一种较为浓重的褐色。凡·戴克被称为“光的画家”。扩展资料:黄色(英文:yellow)给人轻快,充满希望和活力的感觉。黄色是由波长介于570-585纳米的光线所形成的颜色,红、绿色光混合可产生黄光。黄的互补色是蓝。但传统上画师以紫色作为黄的互补色。黄色是电磁波的可视光部分中的中波长部分,波长大约为570~585nm,红、绿色光混合可产生黄光,类似熟柠檬或向日葵菊花色,光谱位于绿色和橙色之间的颜色。黄色对比色是紫色,互补色是蓝色,黄色是绿色和红色的结合色。四个心理学基色之一,以及减法三原色之一。注意:词汇“黄色”所指称的黄色这种颜色,并不具有词汇“黄色”所代表的“色情”义项。黄色-百度百科
2023-07-25 13:17:5510

div开启contenteditable="true"插入标签为什么光标在标签中间?

有没有text-align="center"因为你开启的那个说明了div是可以编辑的。
2023-07-25 13:20:371

如何在html+css 盒子有contenteditable=“true"的时候,输入文本时超过一定距离时实现最后加上省略号

word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden;你试试这段代码, -webkit-line-clamp:2;这个是控制文本长度。
2023-07-25 13:20:441

一个手机只能开一辆共享单车吗?还是好几辆?

同一个品牌的共享单车,一个手机只能解锁一辆。但还可以同时解锁不同品牌的共享单车。比如一个手机只能解锁一个ofo,但这时候也可以解锁一个摩拜,不能同时解锁两个ofo。拓展资料:单车品牌2016年底以来,国内共享单车突然就火爆了起来,在街头,仿佛一夜之间,共享单车已经到了“泛滥”的地步,各大城市路边排满各种颜色的共享单车。通过一番梳理发现,除了较早入局的摩拜单车、ofo外,整个2016年至少有25个新品牌汹涌入局,其中甚至还包括电动自行车共享品牌。这25个品牌包括:摩拜单车、永安行、小鸣单车、小蓝单车、智享单车、北京公共自行车、骑点、奇奇出行、CCbike、7号电单车、黑鸟单车、hellobike、酷骑单车、1步单车、由你单车、踏踏、Funbike单车、悠悠单车、骑呗、熊猫单车、云单车、ofo小黄车、优拜单车、电电Go单车、小鹿单车、小白单车、快兔出行、绿游共享单车GreenBike.此外,还有悟空单车(已倒闭)、3Vbike单车(已倒闭)、町町单车(已倒闭)、闪电单车、DDbike.最近,还出现了全能车,声称可以一份押金畅骑所有品牌共享单车,我们试了下,可以开大部分主流单车品牌的单车,ofo小黄车、摩拜单车称均未授权。参考资料:共享单车 百度百科
2023-07-25 13:21:038

驾驶证异地转本地需要办理哪些手续

取得驾驶证一年以后才可转。本地人持外地驾驶证转入的:持身份证件原件及身份证件复印件一张;近期免冠一寸彩照两张;填写《机动车驾驶证申请表》(在驾驶人适应性检测站体检);提交原驾驶证及档案,由业务领导岗审批,业务员启封档案,审核档案资料是否齐全、真实有效;经网上查询核实,复试道路驾驶(科目三)合格后办理转入手续;留存原驾驶证档案中的《机动车驾驶证申请表》《机动车驾驶证登记项目表》《机动车驾驶员转籍通知单》。外地人持外地驾驶证转入的:持身份证件原件及身份证件复印件一张;户口迁移证明和劳动人事部门调令;近期免冠一寸彩照两张;填写《机动车驾驶证申请表》(在驾驶人适应性检测站体检);提交原驾驶证及档案,由业务领导岗审批,业务员启封档案,审核档案资料是否齐全、真实有效,经网上查询核实后办理转入手续;留存原驾驶证档案中的《机动车驾驶证申请表》《机动车驾驶证登记项目表》《机动车驾驶员转籍通知单。机动车驾驶证的转出和转入:因改变长期居住地或在暂住地居住一年以上,在新的居住地或暂住地申请换发驾驶证的,须到原发证机关办理驾驶证转出手续,并须在驾驶证有效期内和审验有效期内办理。同时履行以下手续:填写申请表;交验户口迁移证或暂住期一年以上的暂住证;交验驾驶证;办理驾驶证转出手续的车辆管理所,经审核各项登记项目后同意转出的,应发出驾驶证转籍通知书,连同规定的驾驶证登记资料一并装封后,由申请人携带交给新的居住地车辆管理所。转出的驾驶证副证应加盖有"转出"字样的印章,转出的驾驶证的转入地未受理前仍属转出地管理。将驾驶证转入新居住地或暂住地换发驾驶证,须在转出后一个月内申请办理,并须履行下列手续:填写《机动车驾驶证申请表》;交验本人身份证件;暂住的还应交验暂住期一年以上的暂住证;递交由转出地车辆管理所按规定袋封的资料;交回驾驶证;接受身体检查;送交本人相片2张。扩展资料:驾驶证全称为机动车驾驶证,又作“驾照”,依照法律机动车辆驾驶人员所需申领的证照。驾驶机动车需要一定的驾驶技能,缺少这种技能的如果随意驾驶机动车,就有可能发生交通事故,一般人无证不能上路行驶。但对于已具备安全驾驶技术的人他们在道路上驾驶车辆,这种允许的证件就是“驾驶证”。这说明驾驶证是一种“许可证明”。驾驶车辆的许可是通过驾驶证的核发来实现的。这表明了获取驾驶证是一种具有一定格式的行为,必须有专门机关来核发。在国际上,对驾驶证的定义为:“为了驾驶汽车,主管当局发给的许可驾驶车辆的证明文件”。(摘自联合国经济社会理事会《关于劝告汽车司机批准方式的最低统一规则》)我国对驾驶证的定义为:机动车驾驶证是指依法允许学习驾驶机动车的人员,经过学习,掌握了交通法规知识和驾驶技术后,经管理部门考试合格,核发许可驾驶某类机动车的法律凭证。2018年4月16日,澳门特别行政区行政长官颁布行政命令,授权运输工务司司长罗立文,代表澳门特区与国家公安部签署内地与澳门关于互认换领机动车驾驶证的协议。参考资料:百度百科-驾驶证
2023-07-25 13:23:075

div添加contentEditable后里面的span标签怎么可以删除整个标签

IE 中这样是正常的会对整个标签进行删除操作IE浏览器一直都是这样非主流····所以就算想也不行
2023-07-25 13:24:271

如何提取别人QQ空间图片或视频地址

图片可以提取,视频不支持提取.1图片地址的提取方法进入好友空间,打开一张图片,点击右上角的 分享,就可以复制图片地址了
2023-07-25 13:24:372

HTML标签标签有什么作用?

其实主要是 Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。 FOR属性 功能:表示Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点。 用法: <Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text"> ACCESSKEY属性: 功能:表示访问Label标签所绑定的元素的热键,当您按下热键,所绑定的元素将获取焦点。 用法: <Label FOR="InputBox" ACCESSKEY="N">姓名</Label><input ID="InputBox" type="text"> 局限性:accessKey属性所设置的快捷键不能与浏览器的快捷键冲突,否则将优先激活浏览器的快捷键。 注意: 要将 LABEL 绑定到其它的控件,请将 LABEL 元素的 FOR 属性设置为与该控件的 ID 相同。将 LABEL 绑定到控件的 NAME 属性毫无用处。但是,要提交表单,你必须为 LABEL 元素所绑定到的控件指定NAME。
2023-07-25 13:25:141

用css选择器 如何选择自己的父元素

1、双击打开HBuilderX工具,并新建一个HTML5静态页面,如下图所示:2、在body标签元素内,插入多个div标签,并使用div嵌套,如下图所示:3、在title标签下方添加一个style,设置全局的样式,使用*符号,如下图所示:4、保存代码并打开浏览器查看页面效果,可以发现页面有背景色,如下图所示:5、再利用body标签选择器,设置宽度、字体属性、字体大小等属性,如下图所示:6、最后使用body标签内的div选择器设置div标签样式,添加边框、内外边距,如下图所示:
2023-07-25 13:25:257

jq 如何选中contenteditable="true"元素里的内容?

contenteditable="true"这个你不是放在div或者span中的吗?你是要获得contenteditable中的值还是这个标签中的内容,如果要contenteditable的值$("标签id或者class").attr("contenteditable");如果要修改contenteditable的值就$("标签id或者class").attr("contenteditable",修改后的值);标签内容:$("标签id或者class").html();$("标签id或者class").val();
2023-07-25 13:26:491

如何给自定义的HTML TAG设置CSS属性

<div contenteditable="true">可以编辑里面的内容</div> 如果你在BODY里面加上contenteditable="true",可以发现该属性是多么的神奇。因此我们可以给HTML标签设置contenteditable="true"属性则可以对该标签进行编辑。 contenteditable属性兼容所有浏览器(IE6之前的版本是否兼容未测试) 在有些时候我们完全可以用DIV去替代input或者textarea来达到同样的效果,例如,在使用ajax的时候,在提交表单时我们可以获取DIV的内容。 细心的人会发现,QQ空间中的发表说说的文本框其实就是一个DIV,而非textarea文本框。 Div+CSS如何模拟textarea文本域高度自适应以达到html5标准的contenteditable属性 主要通过为标签添加HTML5中的contenteditable属性达到此效果(contenteditable:规定是否允许用户编辑内容),很棒的是,此属性IE也会支持,所以不用再为兼容问题太去纠结了。   DEMO: 复制代码 代码如下:   <style type="text/css">   .demoEdit{border:1px solid #dddddd;width:450px;min- height:20px;_height:20px;outline:0px;padding:2px;} // outline:0px;样式解决容器获取焦点时,在FF浏览器下容器会显示虚线框的效果.   .demoEdit p{margin:0px;padding:0px;}   </style>   <div contenteditable="true" style="border:1px solid #dddddd;width:360px;min-height:20px;_height:20px;outline:0px;"></div>   <div contenteditable="true" class="demoEdit"></div>   附:   在FF浏览器下,容器获取焦点时,光标的高度会与容器的高度一样高或者不显示光标. 此时若为容器默认加个占位符,比如<br/>或 可以解决这一问题. 现在煜子给大家介绍另一种可编辑可自动适应高度,但又不用加js代码的好方法。让大家开开眼界,煜子直接使用DIV也可以当文本框用,类似于TextArea文本框,更重要的是DIV的用户体验更完美更帅。 Html中的contentEditable属性可以打开某些元素的可编辑状态。也许你没用过contentEditable属性,甚至从未听说过,contentEditable的作用相当神奇。可以让div或整个网页,以及span等等元素设置为可写.我们最常用的输入文本内容便是input与textarea 使用contentEditable属性后,可以在div,table,p,span,body,等等很多元素中输入内容.特别是contentEditable已在html5标准中得到有效的支持。大家来见证一下吧。 设置contentEditable=”true”属性后,是不是相当的神奇。
2023-07-25 13:26:561

contenteditable="true“情况下,如何获取光标所在的元素节点?

给每个文本框添加onfocus事件、获取到焦点时,给一个全局变量赋值、就知道是哪个文本框了或者直接在文本框的这个事件里面操作你想要做的事情。。
2023-07-25 13:27:021

如何在div中显示指定的网页

  谢回复,下面的代码为什么运行点按钮后什么也不显示?新建网页 4function bbb() { var str = document.createElement("div"); str.id = "win3"; str.contentEditable = "true";str.className = "xWin";str.style.position = "absolute"; str.style.setAttribute("left","100px"); str.style.setAttribute("top","50px"); str.style.setAttribute("width","100px"); str.style.setAttribute("height","100px"); str.style.setAttribute("z-index","1");str.style.setAttribute("border","2px solid red");document.body.appendChild(str); win3.innerHTML = ""}注:我试过,在不是动态生成的div中的iframe中是可以显示baidu页面的iframe放进这个动态生成的div后就不显示baidu了结论:不是iframe中src所指网页的问题以上代码要是放是一串普通的文本,也是能显示的结论:不是代码动态生成有问题那么是什么问题呢?
2023-07-25 13:27:212

div设置contenteditable="true",即可编辑,我想做一个按钮,点击它之后,焦点处就自动出现一个可编辑的

将DIV对象的contenteditable属性设置为true之后,再插入一个表格,就能编辑了.代码如下:<body><div id="abc">abc</div><br><input type="button" onclick="javascript:doit();" value="Go!"><script language="javascript">function doit(){ var abc=document.getElementById("abc"); abc.contentEditable=true; abc.innerHTML+="<table border="1"><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></table>"}</script></body>
2023-07-25 13:27:282

contenteditable 属性设为plaintext-only后,如何添加换行?

就说两个CSS3的  user-modify  css版的contenteditable  使用方法:  user-modify: read-only;  user-modify: read-write;  user-modify: write-only;  user-modify: read-write-plaintext-only;  其中read-only为默认值,write-only是来搞笑的,read-write和contenteditable="true"效果一致,read-write-plaintext-only和contenteditable="plaintext-only"效果一致(没错这属性还有这个值但是还是草案中)。  至于兼容性么,就跟这玩意儿为人所知的程度一样,贫乏得可怜,目前IE浏览器不明,FF只支持前三个属性,Chrome高版本可以全部支持,但是全都要加上私有前缀。  适用场景的话,大概就是contenteditable的css版,想要做高度自适应的文本编辑框,又不想在粘贴复制的时候把html给复制进去。生产环境还是老老实实用js来搞吧。
2023-07-25 13:27:501

1.进入qq业务站2.状态查询3.点击:个人增值服务4.将下面的代码输入地址栏 java

javascript:document.body.contentEditable="true"; document.designMode="on"; void 0
2023-07-25 13:27:591

给div设置 contenteditable=true属性后输入中文可以自动换行,数字怎么不可以

你可以加个css看看:div换行的CSS运用 主要介绍word-warp和word-break属性的使用。word-wrap--------------------------------------------------------------------------------语法:word-wrap : normal | break-word 取值:normal :  默认值。允许内容顶开指定的容器边界 break-word :  内容将在边界内换行。如果需要,词内换行( word-break )也将发生 说明:设置或检索当当前行超过指定容器的边界时是否断开转行。此属性仅作用于有布局的对象,如块对象。内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 position 属性为 absolute ,或者设定 display 属性为 block 。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 wordWrap 。示例:div { word-wrap: break-word; word-break: break-all; } word-break--------------------------------------------------------------------------------语法:word-break : normal | break-all | keep-all 取值:normal :  默认值。允许在词间换行 break-all :  该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 keep-all :  与所有非亚洲语言的 normal 相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本 说明:设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文,应该使用 break-all 。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 wordBreak 。示例:div {word-break : break-all; }
2023-07-25 13:28:062

div contenteditable 里面的img点击问题

我觉得不是代码的问题,一样的html代码在移动端选中的操作是长按,要弹出提示的话长按不松开就好,可以调试的时候试一下
2023-07-25 13:28:151

html5 textarea内的文字怎么美化

其实代码很简单:<div class="durl" id="box" contenteditable="true"> 例:<a class="dlink" href="http://item.taobao.com/item.htm?id=40862965433" target="_blank">http://item.taobao.com/item.htm?id=40862965433</a></div>重点是这句contenteditable="true"contentEditable html中的一个属性。设置html的contentEditable=‘true"时,即可开启该元素的编辑模式。Html中的contentEditable的属性可以打开某些元素的可编辑状态.也许你没用过contentEditable属性.甚至从未听说过.contentEditable的作用相当神奇.可以让div或整个网页,以及span等等元素设置为可写。我们最常用的输入文本内容便是input与textarea  使用contentEditable属性后,可以在div,table,p,span,body,等等很多元素中输入内容.如果想要整个网页可编辑,请在body标签内设置contentEditablecontentEditable已在html5标准中得到有效的支持。在IE8下设置表格可写不支持,其他元素没有问题。在FireFox运行一切正常。谷歌浏览器运行一切正常contentEditable已在html5标准中得到有效的支持。在IE8下设置表格可写不支持,其他元素没有问题。在FireFox运行一切正常。谷歌浏览器运行一切正常
2023-07-25 13:28:231

《有故事的汉字》— 尘

<p>今天我看了有故事的汉字这本书,其中“尘”在甲骨文里面是三个鹿的形状。因为鹿的腿修长而矫健有力非常善于奔跑,一群鹿一起奔跑时,飞扬起来的尘土一定很多,所以“尘”字就是按照众多的鹿一起奔跑尘土飞扬的样子造的。后来“尘”字上大三只鹿省略成一只鹿的意思,意思仍表示尘土。 </p><div class="image-package"><img name="43BD85F7-E481-4DCE-B2CD-8FC76A40BCD2.jpg" src="http://upload-images.jianshu.io/upload_images/13057708-d2ad2d8bf69313a1.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240" data-original-src="http://upload-images.jianshu.io/upload_images/13057708-d2ad2d8bf69313a1.jpg" data-src="http://upload-images.jianshu.io/upload_images/13057708-d2ad2d8bf69313a1.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240"> <div class="image-caption" contenteditable="false"></div></div>
2023-07-25 13:29:081

在地址栏中加一条什么命令,就可以修改当前的网页?

javascript:document.body.contentEditable="true"; document.designMode="on";!msn1dai是这个详细资料在IE浏览器任意打开一个网站,然后在浏览器上输入如下代码javascript:document.body.contentEditable="true"; document.designMode="on"; void 0然后回车,你就可以随心所欲的修改这个网站啦!通过这段代码你可以对一些禁止复制内容的网页进行复制了+++++++++++++++++++++++++++++++++++++++++++ 解除网页锁定的小工具 操作也很简单: 首先,打开记事本,把下列代码复制进去: ——————从下面开始复制,不包括本行———————— [InternetShortcut] URL=javas cript:function document.oncontextmenu(){return true;} function document.onselectstart(){return true;} function document.onsdragstart(){return true;} ———————到此为止,不包括本行—————— 然后,注意此处是关键::保存文件时在“保存类型”里选“所有文件”,文件名填“解除网页锁定.url”,并将此文件保存保存在C: Documents and Settings[当前用户名]Favorites下即可,之后打开IE,收藏菜单下会多出一个叫“解除网页锁定”的菜单项。 注 : Favorites 有些版本的操作系统显示的“收藏夹”
2023-07-25 13:29:182

可编辑div contenteditable="plaintext-only" 模拟输入框,在IE浏览器下,鼠标不显示光标,不能输入编辑

兼容性问题,只有部分浏览器能出效果
2023-07-25 13:29:241

求助哈,div处理成contenteditable=true,传值到input中,格式和换行都没了,

把div的innerHTML放到input中,你不用管input的显示,把input的值放到数据库里即可。显示时把数据库中的值放到div中,input不支持富文本的显示,所以你从哪里取值再放回哪里即可
2023-07-25 13:29:311

当div 的contenteditable属性设置为true 时,它的内部嵌套了子DIV,这个子DIV内的元素如何才能不可编辑

tabindex="-1" ,只要是负数就可以的
2023-07-25 13:29:382

jquery中使用html给textarea赋值,再使用val获取时候,html代码就无效了,有什么办法解决

首先 textarea是标准是不能设置标签的 如果你真的想设置html那么建议你用div 设置给div加一个属性 contenteditable="true"如 <div id="div" contenteditable="true"></div>然后运行这个网页 你就会发现这个div可以输入东西了 那么你再在里面加上html当然不是问题 对吧 呵呵 现在有很多的编辑框 都不用textarea 都是用div只不过这个div当中的回车 是<p></p>标签 你在获取这个div.html()时 就要对它进行处理了如:var context = $("#div").html();context=context.replace(/</p>/," ") //将内容的全部</p>替换为 也就是换行context=context.replace(/<p>/,"") //将内容的全部<p>去掉这样就是你想要的结果了 不过如果你在里面加了其它标签 就自己做处理吧
2023-07-25 13:29:484

下列哪些是HTML5新增的通用属性?

下列哪些是HTML5新增的通用属性? A.contenteditableB.designModeC.hiddenD.spellcheck正确答案:contenteditable;designMode;hidden;spellcheck
2023-07-25 13:29:551

div 设置contenteditable="true" 怎么超出了边框还能编辑

那个代码只是告诉浏览器这个div可以编辑,又没规定不能超过边框,div的大小是你自己的css设定的
2023-07-25 13:30:021

div得到焦点

var Apdiv=document.getElementById("apDiv1s");Apdiv.focus();或者 在body <body onload="document.form名.你想获取焦点的那一个属性名.focus();"><body onload="document.form1.input1.focus();"><form name="form1"> <imput name="input1"/></form></body>
2023-07-25 13:30:092

如何实现contenteditable可输入元素的onchange事件

contenteditable 属性是 HTML5 中的新属性,设置属性值为true时可实现将div、p等元素转化为类似input的可输入元素。但是此元素在输入中文时无法正常使用onchange事件实现常规需求,如下提供可替换方案: 假设需求:可编辑输入框中输入值改变即向后台请求,发送数据。 如果是input、textarea元素,此场景可以用onchange事件轻松完成,然而可编辑的div元素利用此onchange或者oninput事件时会出现不符场景的非常规情况(输入中文时,中文未生成,仍在敲击键盘时会触发输入值改变,获取当前敲击的英文字母而发送请求) eg: https://s31.aconvert.com/convert/p3r68-cdx67/jcx2z-lbens.gif
2023-07-25 13:30:151

js设置 div 属性contenteditable不起作用,为什么

我也遇到同样问题,将div的contenteditable="plaintext-only"就可以粘贴纯文本了。避免粘贴时带样式和html标签。
2023-07-25 13:30:381

为什么图片拖不进对话框,拖的话,会从网页上打开,复制粘贴都没用

那个是默认事件,换句话说就是程序以及网页设置的问题了html里的<textarea></textarea>标签是不能接受一些图片的,而且他的默认事件就是你拖动图片到里面,他就新窗口打开,解决方法就是用JS取消默认事件,并且自定义事件,而一些百度贴吧,qq空间,新浪微博的发表栏里就能放入并且显示图片,其实也很简单,比如将一个html标签的属性contenteditable设置成true就行了,也可以拖动图片到里面了。。。。。 <div contenteditable="true" style="width:800px; height:200px; border:1px solid #ccc;">122</div>
2023-07-25 13:31:014

jsp怎么将input设置成不可更改但是能有onclick事件

使用它的disable属性,将其设置为true即可。这里可以触发onclick事件
2023-07-25 13:31:082

设置div的contentEditable="ture"后打几个字按回车,怎么改变回车前的字和回车后的字上下间的距离?

回车是没用的,你加<br>标签在最后面比如:sssss<br>ddddd<br>字体行高可以用这个CSS属性设置:line-height:2
2023-07-25 13:31:151

一个关于《js+》空格问题

<div contenteditable="true" id="name" style="width:300px; height:100px; border:1px solid #000"></div><input type="button" onclick="test()" value="test" /><script type="text/javascript">function test(){a = document.getElementById("name").innerText; a = a.replace(/s/g,""); alert(a);}</script>
2023-07-25 13:31:281

百度的音乐播放时有同步显示歌词,谁知道代码?

<html><head><meta http-equiv=Content-Type content=text/html; charset=gb2312><title>漫步人生路</title><STYLE type=text/css>TD { FONT-SIZE: 9pt; LINE-HEIGHT: 17px; }BODY{FONT-SIZE: 9pt;LINE-HEIGHT: 17px;margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;}#lrcollbox td, #lrcollbox font {font-family: 黑体; font-size: 16px;}#lrcoll td { color:#0080C0; cursor: default; }#lrcbox { color:#00FF00 }#lrcfilter { filter: alpha(opacity=0) }#lrcbc { color:#FFFF33 }</STYLE></head><script language="JavaScript">self.moveTo(0,0);self.resizeTo(screen.availWidth,screen.availHeight);</script><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><span id="lrcdata"><!--[ti:][ar:][al:][by:][00:00.63]邓丽君[00:04.13]漫步人生路[00:05.88]寒川制作[00:09.06]悠然小居[00:24.37]在你身边路虽远[00:29.62]末疲倦[00:32.25]伴你漫行[00:34.76]一段接一段[00:37.17]越过高峰[00:39.25]另一峰却又见[00:42.31]目标推远[00:44.06]让理想永远在前面[00:47.78]路纵崎岖[00:50.29]亦不怕受磨练 [00:53.14]愿一生中[00:54.78]苦痛快乐也体验[00:58.18]愉快悲哀[01:00.80]在身边转又转[01:03.97]风中赏雪[01:05.51]雾里赏花[01:06.82]快乐回旋[01:08.79]母用计较[01:10.76]快欣赏身边[01:12.29]美丽每一天[01:14.25]还愿确信[01:16.01]美景良辰在脚边[01:20.05]愿将欢笑声[01:22.25]盖掩苦痛那一面[01:24.98]悲也好 喜也好[01:27.49]每天找到新发现[01:30.12]让疾风吹呀吹[01:32.75]尽管给我俩考验[01:35.37]小雨点[01:37.01]放心洒[01:50.02]早已决心向着前[01:56.99]路纵崎岖[02:08.81]亦不怕受磨练[02:12.13]愿一生中[02:14.76]苦痛快乐也体验[02:16.39]愉快悲哀[02:20.01]在身边转又转[02:22.74]风中赏雪[02:24.27]雾里赏花[02:25.69]快乐回旋[02:27.55]母用计较[02:29.52]快欣赏身边[02:30.94]美丽每一天[02:33.02]还愿确信[02:34.88]美景良辰在脚边[02:38.38]愿将欢笑声[02:41.01]盖掩苦痛那一面[02:43.52]悲也好 喜也好[02:46.26]每天找到新发现[02:48.88]让疾风吹呀吹 [02:51.51]尽管给我俩考验[02:54.24]小雨点[02:56.87]放心洒[02:59.39]早已决心向着前[03:02.45]悠然小居[03:17.77]寒川制作[03:30.78]欢迎光临--></span><center><object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" id="aboutplayer" width="480" height="240"><param name="url" value="http://www.ai18.net/DLJMP3/漫步人生路.mp3"><param name="volume" value="100"><param name="enablecontextmenu" value="0"><param name="enableerrordialogs" value="0"></object><div id="lrcollbox" style="overflow:hidden; height:260; width:480; background-color:#000000;"><table border="0" cellspacing="0" cellpadding="0" width="100%" id="lrcoll" style="position:relative; top: -20px;" oncontextmenu="return false;"><tr><td nowrap height="20" align="center" id="lrcwt1"></td></tr><tr><td nowrap height="20" align="center" id="lrcwt2"></td></tr><tr><td nowrap height="20" align="center" id="lrcwt3"></td></tr><tr><td nowrap height="20" align="center" id="lrcwt4"></td></tr><tr><td nowrap height="20" align="center" id="lrcwt5"></td></tr><tr><td nowrap height="20" align="center" id="lrcwt6"></td></tr><tr><td nowrap height="20" align="center"><table border="0" cellspacing="0" cellpadding="0"><tr><td nowrap height="20"><span id="lrcwt7" style="height:20"></span></td></tr><tr style="position:relative; top: -20px; z-index:6"><td nowrap height="20"><div id="lrcfilter" style="overflow:hidden; width:100%; color:#FFFF33; height:20"></div></td></tr></table></td></tr><tr style="position:relative; top: -20px"><td nowrap height="20" align="center"><table border="0" cellspacing="0" cellpadding="0"><tr><td nowrap height="20"><span id="lrcbox" style="height:20">歌词加载中</span></td></tr><tr style="position:relative; top: -20px; z-index:6;"><td nowrap height="20"><div id="lrcbc" style="overflow:hidden; height:20; width:0;"></div></td></tr></table></td></tr><tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt8"></td></tr><tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt9"></td></tr><tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt10"></td></tr><tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt11"></td></tr><tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt12"></td></tr><tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt13"></td></tr></table></div></center><script language="JavaScript">var lrc0;var lrc1;var min;lrcobj = new lrcClass(lrcdata.innerHTML.slice(4,-3));function lrcClass(tt){ this.inr = []; this.min = []; this.oTime = 0; this.dts = -1; this.dte = -1; this.dlt = -1; this.ddh; this.fjh; lrcbc.style.width = 0; if(/[offset:(-?d+)]/i.test(tt)) this.oTime = RegExp.$1/1000; tt = tt.replace(/[:][^$ ]*( |$)/g,"$1"); tt = tt.replace(/[[^[]:]*]/g,""); tt = tt.replace(/[[^[]]*[^[]d]+[^[]]*:[^[]]*]/g,""); tt = tt.replace(/[[^[]]*:[^[]]*[^[]d.]+[^[]]*]/g,""); tt = tt.replace(/<[^<>]*[^<>d]+[^<>]*:[^<>]*>/g,""); tt = tt.replace(/<[^<>]*:[^<>]*[^<>d.]+[^<>]*>/g,""); while(/[[^[]]+:[^[]]+]/.test(tt)) { tt = tt.replace(/(([[^[]]+:[^[]]+])+[^[ ]*)[^[]*/," "); var zzzt = RegExp.$1; /^(.+])([^]]*)$/.exec(zzzt); var ltxt = RegExp.$2; var eft = RegExp.$1.slice(1,-1).split("]["); for(var ii=0; ii<eft.length; ii++) { var sf = eft[ii].split(":"); var tse = parseInt(sf[0],10) * 60 + parseFloat(sf[1]); var sso = { t:[] , w:[] , n:ltxt } sso.t[0] = tse-this.oTime; this.inr[this.inr.length] = sso; } } this.inr = this.inr.sort( function(a,b){return a.t[0]-b.t[0];} ); for(var ii=0; ii<this.inr.length; ii++) { while(/<[^<>]+:[^<>]+>/.test(this.inr[ii].n)) { this.inr[ii].n = this.inr[ii].n.replace(/<(d+):([d.]+)>/,"%=%"); var tse = parseInt(RegExp.$1,10) * 60 + parseFloat(RegExp.$2); this.inr[ii].t[this.inr[ii].t.length] = tse-this.oTime; } lrcbc.innerHTML = "<font>"+ this.inr[ii].n.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/%=%/g,"</font><font>") +"</font>"; var fall = lrcbc.getElementsByTagName("font"); for(var wi=0; wi<fall.length; wi++) this.inr[ii].w[this.inr[ii].w.length] = fall[wi].offsetWidth; this.inr[ii].n = lrcbc.innerText; } for(var ii=0; ii<this.inr.length-1; ii++) this.min[ii] = Math.floor((this.inr[ii+1].t[0]-this.inr[ii].t[0])*10); this.min.sort(function(a,b){return a-b}); min = this.min[0]/2; this.run = function(tme) { if(tme<this.dts || tme>=this.dte) { var ii; for(ii=this.inr.length-1; ii>=0 && this.inr[ii].t[0]>tme; ii--){} if(ii<0) return; this.ddh = this.inr[ii].t; this.fjh = this.inr[ii].w; this.dts = this.inr[ii].t[0]; this.dte = (ii<this.inr.length-1)?this.inr[ii+1].t[0]:aboutplayer.currentMedia.duration; lrcwt1.innerText = this.retxt(ii-7); lrcwt2.innerText = this.retxt(ii-6); lrcwt3.innerText = this.retxt(ii-5); lrcwt4.innerText = this.retxt(ii-4); lrcwt5.innerText = this.retxt(ii-3); lrcwt6.innerText = this.retxt(ii-2); lrcwt7.innerText = this.retxt(ii-1); lrcfilter.innerText = this.retxt(ii-1); lrcwt8.innerText = this.retxt(ii+1); lrcwt9.innerText = this.retxt(ii+2); lrcwt10.innerText = this.retxt(ii+3); lrcwt11.innerText = this.retxt(ii+4); lrcwt12.innerText = this.retxt(ii+5); lrcwt13.innerText = this.retxt(ii+6); this.print(this.retxt(ii)); if(this.dlt==ii-1) { clearTimeout(lrc0); if(lrcoll.style.pixelTop!=0) lrcoll.style.top = 0; golrcoll(0); clearTimeout(lrc1); lrcfilter.filters.alpha.opacity = 100; golrcolor(0); } else if(parseInt(lrcoll.style.top)!=-20) { clearTimeout(lrc0); lrcoll.style.top = -20; clearTimeout(lrc1); lrcfilter.filters.alpha.opacity = 0; } this.dlt = ii; } var bbw = 0; var ki; for(ki=0; ki<this.ddh.length && this.ddh[ki]<=tme; ki++) bbw += this.fjh[ki]; var kt = ki-1; var sc = ((ki<this.ddh.length)?this.ddh[ki]:this.dte) - this.ddh[kt]; var tc = tme - this.ddh[kt]; bbw -= this.fjh[kt] - tc / sc * this.fjh[kt]; if(bbw>lrcbox.offsetWidth) bbw = lrcbox.offsetWidth; lrcbc.style.width = Math.round(bbw); } this.retxt = function(i) { return (i<0 || i>=this.inr.length)?"":this.inr[i].n; } this.print = function(txt) { lrcbox.innerText = txt; lrcbc.innerText = txt; } this.print("寒川"); lrcwt1.innerText = ""; lrcwt2.innerText = ""; lrcwt3.innerText = ""; lrcwt4.innerText = ""; lrcwt5.innerText = ""; lrcwt6.innerText = ""; lrcwt7.innerText = ""; lrcfilter.innerText = ""; lrcwt8.innerText = ""; lrcwt9.innerText = ""; lrcwt10.innerText = ""; lrcwt11.innerText = ""; lrcwt12.innerText = ""; lrcwt13.innerText = "";}function lrcrun(){ with(aboutplayer) { lrcobj.run(controls.currentPosition); } if(arguments.length==0) setTimeout("lrcrun()",10);}function golrcoll(s){ lrcoll.style.top = -(s++)*2; if(s<=9) lrc0 = setTimeout("golrcoll("+s+")",min*10);}function golrcolor(t){ lrcfilter.filters.alpha.opacity = 110-(t++)*10; if(t<=10) lrc1 = setTimeout("golrcolor("+t+")",min*10);}window.onerror = function(){return true;}lrcrun();</script></body></html>
2023-07-25 13:31:362