Google Keep 文本输入如何工作？

Question

我正在考虑为我的网站创建一个文本编辑器，并且非常喜欢 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>

Answer 1

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

您可以通过 Angular and Firebase 获得结果。两者均可免费上手。

这里有更多内容link

Answer 2

contenteditable="true" 和 role="textbox" 告诉 DOM 像对待 <textbox> 一样对待 <div> 元素。根据 WAI-ARIA Standards，这种方法可以让有阅读障碍的人更轻松地浏览屏幕，因为屏幕 reader 会更好地了解元素是什么在页面上。

没有看到渲染的 DOM，我不能 100% 确定 Google 在做什么，但是根据用户输入操作 DOM 非常容易这样的。在下面的示例中，我使用定位输入元素，然后创建一个 onkeyup 函数，将内容写入辅助 'output' <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>

希望对您有所帮助！ :)

Google Keep 文本输入如何工作？

How does the Google Keep text input work?

html

javascript

google-keep