html规定元素内容是否可编辑的属性contenteditable
实例
一段可编辑的段落：
<p contenteditable="true">这是一个可编辑的段落。</p>
浏览器支持
IE
Firefox
Chrome
Safari
Opera
所有主流浏览器都支持 contenteditable 属性。
定义和用法
contenteditable 属性规定元素内容是否可编辑。
注释：如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。
HTML 4.01 与 HTML5 之间的差异
contenteditable 属性是 HTML5 中的新属性。
语法
<element contenteditable="true|false">
属性值
| 值 | 描述 |
| true | 规定元素可编辑。 |
| false | 规定元素不可编辑。 |
在HTML里面，光标是一个对象，光标对象是只有当你选中某个元素的时候才会出现的。
当我们去点击一个输入框的时候，实际上它会产生一个选中对象-selection（就是我们可以看到的文字变成蓝色的那个区域），selection在火狐浏览器可以直接用 window.getSelection()获取，在HTML里面，selection只有一个的，并且selection是一个区域，你可以想象成一个长方形，它是有开始和结束的
当你点击一个输入框，或者你切换到别的输入框，selection是会跟着变化的。光标就是在selection里面，光标叫做range，是一个片段区域，和selection一样，有开始点，和结束点，当我们对文字按下左键向右拉的时候，就看到了文字变成蓝色，那个就是光标的开始和结束，当我们直接点一下的时候，光标在闪，其实只是开始和结束点重叠了。
OK，现在我们来实际操作光标了。直接看完整的代码，然后看效果吧。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<style>#edit{height:500px;width:500px;border:1px solid red;}</style></head><body>
<div id="edit" contenteditable></div>
<input type="text" id="emojiInput">
<button id="sendEmoji">发送表情</button>
<script>
var sendEmoji = document.getElementById('sendEmoji') // 定义最后光标对象
var lastEditRange; // 编辑框点击事件
document.getElementById('edit').onclick = function() { // 获取选定对象
var selection = getSelection() // 设置最后光标对象
lastEditRange = selection.getRangeAt(0)
} // 编辑框按键弹起事件
document.getElementById('edit').onkeyup = function() { // 获取选定对象
var selection = getSelection() // 设置最后光标对象
lastEditRange = selection.getRangeAt(0)
} // 表情点击事件
document.getElementById('sendEmoji').onclick = function() { // 获取编辑框对象
var edit = document.getElementById('edit') // 获取输入框对象
var emojiInput = document.getElementById('emojiInput') // 编辑框设置焦点
edit.focus() // 获取选定对象
var selection = getSelection() // 判断是否有最后光标对象存在
if (lastEditRange) { // 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
selection.removeAllRanges()
selection.addRange(lastEditRange)
} // 判断选定对象范围是编辑框还是文本节点
if (selection.anchorNode.nodeName != '#text') { // 如果是编辑框范围。则创建表情文本节点进行插入
var emojiText = document.createTextNode(emojiInput.value)
if (edit.childNodes.length > 0) { // 如果文本框的子元素大于0，则表示有其他元素，则按照位置插入表情节点
for (var i = 0; i < edit.childNodes.length; i++) { if (i == selection.anchorOffset) {
edit.insertBefore(emojiText, edit.childNodes[i])
}
}
} else { // 否则直接插入一个表情元素
edit.appendChild(emojiText)
} // 创建新的光标对象
var range = document.createRange() // 光标对象的范围界定为新建的表情节点
range.selectNodeContents(emojiText) // 光标位置定位在表情节点的最大长度
range.setStart(emojiText, emojiText.length) // 使光标开始和光标结束重叠
range.collapse(true) // 清除选定对象的所有光标对象
selection.removeAllRanges() // 插入新的光标对象
selection.addRange(range)
} else { // 如果是文本节点则先获取光标对象
var range = selection.getRangeAt(0) // 获取光标对象的范围界定对象，一般就是textNode对象
var textNode = range.startContainer; // 获取光标位置
var rangeStartOffset = range.startOffset; // 文本节点在光标位置处插入新的表情内容
textNode.insertData(rangeStartOffset, emojiInput.value) // 光标移动到到原来的位置加上新内容的长度
range.setStart(textNode, rangeStartOffset + emojiInput.value.length) // 光标开始和光标结束重叠
range.collapse(true) // 清除选定对象的所有光标对象
selection.removeAllRanges() // 插入新的光标对象
selection.addRange(range)
} // 无论如何都要记录最后光标对象
lastEditRange = selection.getRangeAt(0)
} </script></body></html>Atas ialah kandungan terperinci html规定元素内容是否可编辑的属性contenteditable. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP?
Feb 07, 2025 am 11:57 AM
Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
