3

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

2 回答 2

2

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

在没有看到渲染的 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>

希望这可以帮助！:)

于 2017-07-30T20:36:56.737 回答
1

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

您可以使用Angular和Firebase实现结果。两者都可以免费开始。

更多这里链接

于 2017-07-30T20:36:01.620 回答