让div可编辑,设置标签的可读可写属性

1、添加contenteditable属性让文本处于可编辑状态,<p contenteditable="true">这里可以编辑</p>

contenteditable: "inherit";(默认)
contenteditable: "plaintext-only";(输入纯文本)
contenteditable: "true";
contenteditable: "false";
contenteditable: "caret";(符号)
contenteditable: "events";(不知道搞啥用的)

2、利用css的user-modify

user-modify: read-only;
user-modify: read-write;
user-modify: write-only;(暂不支持)
user-modify: read-write-plaintext-only;(输入纯文本,暂时只有谷歌支持:
-webkit-user-modify: read-write-plaintext-only)


转载于:https://www.cnblogs.com/Zting00/p/7497701.html

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个问题可能是由于移动设备上的光标处理方式不同于桌面设备所致。为了解决这个问题,您可以尝试使用JavaScript来动态设置属性来解决。具体来说,您可以在渲染<span>标签的时候判断是否处于编辑状态,如果是,则将属性contenteditable设置为true,否则设置为false。以下是一个简单的示例代码: ```html <div id="myDiv" contenteditable="true"> <span contenteditable="false">不可编辑的文本</span> <span contenteditable="true">可编辑的文本</span> </div> <script> var div = document.getElementById("myDiv"); div.addEventListener("focus", function() { var spans = div.getElementsByTagName("span"); for (var i = 0; i < spans.length; i++) { if (spans[i].getAttribute("contenteditable") !== "true") { spans[i].setAttribute("contenteditable", "true"); } } }); div.addEventListener("blur", function() { var spans = div.getElementsByTagName("span"); for (var i = 0; i < spans.length; i++) { if (spans[i].getAttribute("contenteditable") !== "false") { spans[i].setAttribute("contenteditable", "false"); } } }); </script> ``` 在这个示例中,我们为<div>元素设置了contenteditable属性,使其变为可编辑状态。在<div>元素上监听了focus和blur事件,当<div>元素获取焦点时,遍历其中的所有<span>标签,将contenteditable属性设置为true,使其变为可编辑状态;当<div>元素失去焦点时,遍历其中的所有<span>标签,将contenteditable属性设置为false,使其变为不可编辑状态。这样,无论是在桌面设备还是移动设备上,用户都可以正确地编辑文本并且光标的位置也会正确地显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值