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和Firebase来获得结果。两者都可以自由开始。

更多link

Answer 2

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

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

// 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文字输入如何运作？

2 个答案: