Google Keep文本输入如何工作？

我正在研究为我的网站创建文本编辑器，并且非常喜欢Google Keep如何输入文本。首先，基于HTML，他们不会出现使用输入字段/文本区域，而是出现一些JavaScript模式的输入，它会接受文本输入并生成HTML文本并将其放置在DOM中。那么他们是否有可能建立了自己的输入功能，以允许他们和用户操纵他们放入的内容？或者更有可能他们有一个全功能的输入字段或者一些能够捕获数据的东西，而且它只是隐藏在视野之外？Google Keep文本输入如何工作？

这是我所看到的，当我去寻找到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>

来源

2017-07-30 Milktea

的contenteditable="true"和role="textbox"告诉DOM对待像<textbox>的<div>元素。根据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>

希望这有助于！ :)

来源

2017-07-30 20:36:56

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

您可以使用Angular和Firebase来获得结果。两者都可以自由开始。

这里更多link

来源

2017-07-30 20:36:01 Hareesh

不回答我的直接问题，但这对我的项目肯定有用。感谢你的回答。 – Milktea

Google Keep文本输入如何工作？

回答

相关问题