contenteditable true，view-distance
各位老铁们，大家好，今天由我来为大家分享contenteditable true，以及view-distance的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
如何让contenteditable元素只能输入纯文本 00 张鑫旭
一、温故而知新
很多年以前，稍等，让我搜一下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元素中精准监听文本选区
在contenteditable元素中精准监听文本选区，需结合mouseup事件与Selection对象的isCollapsed属性及toString().length判断，避免仅依赖单一条件导致的误判。
核心实现逻辑监听mouseup事件由于contenteditable元素不触发select事件，需通过mouseup间接捕获选区变化。该事件在用户释放鼠标时触发，覆盖选区创建、修改及取消场景。
获取Selection对象通过window.getSelection()获取当前选区信息，其关键属性包括：
toString()：返回选中文本的字符串形式，长度为0时可能表示无选区或选区已取消。
isCollapsed：布尔值，true表示选区折叠（无实际文本选中，如光标状态），false表示存在有效选区。
联合判断条件仅当以下条件同时满足时，认定存在有效选区：
selection.toString().length> 0：确保选区包含文本。
!selection.isCollapsed：排除折叠状态（如点击选区外部取消选区）。
代码实现示例const editorElement= document.getElementById('myEditor');const toolbar= document.getElementById('toolbar');editorElement.addEventListener('mouseup',()=>{ const selection= window.getSelection();//判断条件：非折叠且包含文本 if(!selection.isCollapsed&& selection.toString().length> 0){ console.log("有效选区:", selection.toString()); showToolbar(selection);//显示工具栏} else{ console.log("无有效选区"); hideToolbar();//隐藏工具栏}});function showToolbar(selection){ const range= selection.getRangeAt(0); const rect= range.getBoundingClientRect(); toolbar.style.display='block'; toolbar.style.left= `${rect.left}px`; toolbar.style.top= `${rect.top- 40}px`;//工具栏显示在选区上方}function hideToolbar(){ toolbar.style.display='none';}关键问题解决误判场景：用户选中文本后点击选区外部，mouseup仍触发。若仅依赖toString().length，可能因浏览器缓存选区信息导致误判。解决方案：通过isCollapsed排除折叠状态，确保工具栏仅在有效选区时显示。
工具栏定位：使用getRangeAt(0).getBoundingClientRect()获取选区位置，动态调整工具栏坐标，避免遮挡文本。
完整示例（HTML+CSS+JS）<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>contenteditable选区检测</title><style>#myEditor{ border: 1px solid#ccc; padding: 15px; min-height: 100px; margin: 20px 0;}#toolbar{ position: absolute; background:#333; color: white; padding: 5px; border-radius: 3px; display: none;}#toolbar button{ background: none; border: none; color: white; cursor: pointer; margin: 0 5px;}</style></head><body><div id="myEditor" contenteditable="true">尝试选中这段文本，工具栏会出现在上方。点击外部则隐藏。</div><div id="toolbar"><button onclick="applyStyle('bold')">B</button><button onclick="applyStyle('italic')">I</button></div><script> const editor= document.getElementById('myEditor'); const toolbar= document.getElementById('toolbar'); editor.addEventListener('mouseup',()=>{ const selection= window.getSelection(); if(!selection.isCollapsed&& selection.toString().length> 0){ showToolbar(selection);} else{ hideToolbar();}}); function showToolbar(selection){ const range= selection.getRangeAt(0); const rect= range.getBoundingClientRect(); toolbar.style.left= `${rect.left}px`; toolbar.style.top= `${rect.top- 40}px`; toolbar.style.display='block';} function hideToolbar(){ toolbar.style.display='none';} function applyStyle(style){ document.execCommand(style, false, null);}</script></body></html>注意事项浏览器兼容性：Selection API在主流浏览器中支持良好，但需测试旧版浏览器（如IE）的兼容性。性能优化：频繁触发mouseup时，可添加防抖（debounce）机制减少不必要的计算。扩展功能：可结合MutationObserver监听内容变化，或通过keydown事件增强选区控制（如快捷键操作）。通过上述方法，可精准监听contenteditable元素中的文本选区，实现如富文本编辑器中工具栏的动态显示与隐藏。
...javascript:document.body.contentEditable='true';docume
javascript:document.body.contentEditable='true';这就是给body标签设置了contentEditable属性为true，也就是说body标签下的内容都被设置成了可编辑状态。
允许contentEditable属性的存在对浏览器来说是有很大好处的。
首先，界面设计师可以实时的观察网页的改动对显示效果的影响，方便做出调整。
其次，可以让浏览器作为程序界面来被使用，而不只是作为一个上网浏览的工具。用户可以只用浏览器就进行各种各样的数据处理和编辑，然后通过和js的结合，进行逻辑上的处理以及保存。
听说过最近google出的Chrome操作系统吗？这个操作系统里只有一个Chrome浏览器，所有程序都是在这个浏览器里运行的，程序的界面显示都是通过浏览器来呈现的，用户能够修改界面上的内容，就是通过相应元素的contentEditable属性来实现的。
好了，文章到这里就结束啦，如果本次分享的contenteditable true和view-distance问题对您有所帮助，还望关注下本站哦！