Google Keep 文本输入是如何工作的？答案

【问题标题】：How does the Google Keep text input work?Google Keep 文本输入是如何工作的？
【发布时间】：2017-07-30 20:23:03
【问题描述】：

我正在考虑为我的网站创建一个文本编辑器，并且非常喜欢 Google Keep 的文本输入方式。乍一看，基于 HTML，它们似乎没有使用输入字段/文本区域，而是某种 javascript 输入模式，它接受文本输入并生成与文本等效的 HTML 并将其放置在 DOM 中。那么他们是否有可能构建自己的输入功能以允许他们和用户操作他们输入的内容？还是更有可能他们有一个通用输入字段或捕获数据的东西，只是隐藏在视图之外？

这就是我在查看 DevTools 时看到的全部内容

<div contenteditable="true" aria-multiline="true" role="textbox" class="notranslate IZ65Hb-YPqjbf h1U9Be-YPqjbf" tabindex="0" spellcheck="true" dir="ltr">
    This is their "input field"
    <br>
    That renders html 
    <br>
    Based on the text that's entered
    <br>
    But I want to know how I should be capturing this text
</div>

【问题讨论】：

标签： javascript html google-keep

【解决方案1】：

contenteditable="true" 和 role="textbox" 告诉 DOM 将 <div> 元素视为 <textbox>。根据 WAI-ARIA Standards 的说法，这种方法可以让有阅读障碍的人更轻松地浏览屏幕，因为屏幕阅读器可以更好地了解页面上的元素。

如果没有看到渲染的 DOM，我不能 100% 确定 Google 正在做什么，但是根据用户输入来操作 DOM 非常容易。在以下示例中，我使用输入元素作为目标，然后创建一个 onkeyup 函数，将内容写入辅助“输出”<div>。第二个<div> 反映了示例中的输入，但可以编码以使用 AJAX 将输入发送到另一个页面（或数据库），包含在页面的其他位置，或者设置样式以以更好的方式格式化输入。

// Initial text
document.getElementById('output').innerHTML = document.getElementsByClassName('h1U9Be-YPqjbf')[0].innerHTML

// On change
document.getElementsByClassName('h1U9Be-YPqjbf')[0].onkeyup = function() {
  document.getElementById('output').innerHTML = document.getElementsByClassName('h1U9Be-YPqjbf')[0].innerHTML
}

.h1U9Be-YPqjbf {
  border: 1px solid blue;
}

#output {
  margin-top: 20px;
  border: 1px solid red;
}

<div contenteditable="true" aria-multiline="true" role="textbox" class="notranslate IZ65Hb-YPqjbf h1U9Be-YPqjbf" tabindex="0" spellcheck="true" dir="ltr">
  This is their "input field"
  <br> That renders html
  <br> Based on the text that's entered
  <br> But I want to know how I should be capturing this text
</div>

<div id="output"></div>

希望这会有所帮助！ :)

【讨论】：

【解决方案2】：

我认为他们在幕后使用Firebase three way binding。

您可以使用Angular 和Firebase 获得结果。两者都可以免费上手。

更多这里link

【讨论】：

不回答我的直接问题，但这对我的项目绝对有用。感谢您的回答。