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文本輸入如何工作？

回答

相關問題