关于contenteditable=false的疑问

junkangL 2018-10-11 11:45:12

在使用了contenteditable=true的div里动态插入一段带contenteditable=false的内容，聚焦时光标位置显示在最右边！！（但输入内容则是跟在内容后面。。。。。。。。）
如果内容后面有空格或者其他内容、标签则光标显示正常；输入内容后光标显示也正确；
不知道这是什么机制以及如何解决，希望大伙帮忙参考参考，能给个建][/img]ointForum/ui/scripts/csdn/Plugin/001/face/18.gif][/img]

...全文

690 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

junkangL 2018-10-11

打赏
举报

回复

以上图箭头处就是动态生成内容后的光标位置，只要后面有内容则会正常显示

html5给大多数元素都增加了contentEditable属性，如果给某元素设置属性 contentEditable = "true"，那么该元素就会进入可编辑状态，即浏览器会允许用户直接编辑该元素内容。 html: <div class="wraper"> <div contenteditable="true"> ...

全手打原创，转载请标明出处：https://www.cnblogs.com/dreamsqin/p/11466197.html 先看最终实现的demo效果图：（1）上面看似文本域的大框是通过给div添加contenteditable=true属性实现的Vue组件DivEditable.vue；（2）下面的输入框是父组件中与DivEditable绑定相同变量的输入框...

先看最终实现的demo效果图：(1)上面看似文本域的大框是通过给div添加contenteditable=true属性实现的Vue组件DivEditable.vue；(2)下面的输入框是父组件中与DivEditable绑定相同变量的输入框，用于展示数据的双向绑定效果；(3)按钮实现绑定变量的赋值操作；(4)DivEditable的blur事件可触发文本过滤或样式的变更等操作(专门留的组件接口)；可...

实例一段可编辑的段落：这是一个可编辑的段落。浏览器支持IEFirefoxChromeSafariOpera所有主流浏览器都支持 contenteditable 属性。定义和用法contenteditable 属性规定元素内容是否可编辑。注释：如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。HTML 4.01 与 HTML5 之间的差异contenteditab...

H5 H5的常用标签及属性：新增和废弃新增的结构（布局）标签：section、artcle、nav、footer、header、hgroup、Aside、figure 新增的其他标签： Video、audio、mark、time、menu、canvas、svg、details、datalist、progress、output、source。。。。。。。 Input type 的

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章