Google Keepのテキスト入力はどのように機能しますか？

Question

私は自分のサイトのテキストエディタを作成しようとしていて、Google Keepがテキスト入力をどのようにしているのか本当に気に入っています。 HTMLに基づいた最初の見た目では、入力フィールド/テキスト領域を使用するようには見えませんが、テキスト入力を受け取り、そのテキストをHTMLに変換してDOMに配置するjavascript入力モードがあります。それで、彼らは自分の入力機能を構築して、ユーザーが入力した内容を操作できるようにしたのでしょうか？あるいは、データをキャプチャする汎用入力フィールドや何かを持っている可能性は高いですか？

これは私が、私は、彼らがFirebase three way bindingを使用して、舞台裏で考えてデベロッパーツール

<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

contenteditable="true"と

もっとrole="textbox"<textbox>よう<div>要素を治療するためのDOMを教えてください。 WAI-ARIA Standardsによれば、このアプローチでは、画面上のどの要素がページ上にあるかをよりよく知ることができるので、読み込み障害を持つユーザーは画面をより簡単にナビゲートできます。

レンダリングされたDOMを見ることなく、Googleが何をしているかを100％確信することはできませんが、ユーザー入力に基づいてDOMを操作するのは非常に簡単です。次の例では、input要素を対象にして、セカンダリ 'output'に内容を書き込むonkeyup関数を作成しています<div>この2番目の<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>

この情報がお役に立てば幸い！ :)

Answer 2

に探して行くとき、私が見るすべてです。

AngularとFirebaseで結果を得ることができます。どちらも自由に始めることができます。ここlink