使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
contenteditable="true"需配合tabindex="0"、禁用css拦截及避免父级contenteditable="false"才能生效，否则会点不动、无光标；须监听paste/input事件过滤html、用textcontent读取内容，并通过range/selection控制光标。
contenteditable 本身不转换文档结构，它只让元素“可输入”，但直接加属性后大概率点不动、回车乱插标签、粘贴炸开、移动端失焦——这不是配置问题，是浏览器没把编辑权真正交给你。
为什么加了 contenteditable="true" 还是点不了、没光标
三个硬性条件缺一不可：
-
tabindex="0"必须显式写上，否则div类容器无法被键盘或.focus()激活 - CSS 不能禁用交互：
user-select: none、pointer-events: none、或未定义:focus样式都会导致点击无响应 - 父级若设了
contenteditable="false"，子元素即使写"true"也立即失效（就近 false 优先）
推荐初始写法：<div contenteditable="true" tabindex="0" style="outline: 2px solid #007bff;">内容</div>
怎么让静态 HTML 的段落、列表、标题保持结构可编辑
浏览器默认会破坏原有 DOM 结构：比如在 <p></p> 里按 Enter，Chrome 插 <div>，Safari 插 <code><br>，Firefox 可能拆出空 <p></p>。你不能靠 CSS 或属性修复，只能拦截 + 重建。
- 监听
keydown，检测e.key === 'Enter'并e.preventDefault() - 用
document.getSelection()获取光标位置，创建document.createElement('p')或复用现有语义标签 - 调用
range.insertNode(p)插入，再range.collapse(false)把光标移到新节点末尾 - 禁用浏览器自动换行：CSS 加
white-space: pre-wrap，并移除所有<div> 包裹的段落容器 <h3>粘贴 Word 或网页内容时，如何避免样式爆炸和 XSS</h3> <p>直接接收 <code>event.clipboardData.getData('text/html')= 主动引入风险。用户一粘就带style、data-、onerror、甚至隐藏的<script></script>。- 必须
event.preventDefault()拦截paste事件 - 首选纯文本路径：
event.clipboardData.getData('text/plain')+document.execCommand('insertText', false, text) - 若需保留基础语义（如
<p></p>、<strong></strong>），先用DOMPurify.sanitize(html, {ALLOWED_TAGS: ['p','strong','em','br']})过滤再插入 - iOS Safari 中
paste事件可能不触发，需 fallback 到监听input后做脏数据清洗
读取内容时，
innerHTML和textContent怎么选它们不是“格式 vs 纯文本”的简单二选一，而是安全边界问题：
-
el.textContent安全但丢失所有结构，适合摘要、校验、搜索索引 -
el.innerHTML带格式但含冗余标签（如 Chrome 自动插入的<div><br></div>）、内联样式、XSS 风险节点 - 上线前必须过滤：
DOMPurify.sanitize(el.innerHTML, {ALLOWED_ATTR: ['class']})是底线，别信正则替换 - 不要用
el.value——contenteditable元素没有该属性
真正难的不是加属性，是让不同浏览器对同一操作产出一致的 DOM；而最常被跳过的，是移动端软键盘唤起后光标定位失败——这事必须用
Range+requestAnimationFrame组合兜底，不能只靠.focus()。 - 必须
