どのようにして、screnのキーボードコンセントにデュアルフォントを作成するのですか？

Question

私はファンタジーアルファベットのための翻訳ツールを作っています。このアイデアは、各ボタンがラテンアルファベットとアルファベットの両方で翻訳される必要がある各文字を含むオンスクリーンキーボードを持つことです。 テキストは、あなたの翻訳に依存して

を必要とし、ラテン文字へとファンタジーのフォントに両方の変換することができるというように、両方のアルファベット（いずれかのテキストフィールド内の1つ）でsimultaneousleyを入力して、2つのテキストフィールドに送られ、

私は基本的なHTMLをすべて使いこなしました。これには（CSSを使ってアタッチされた）フォントを使用していますが、実際の機能はわかりません。

私は基本的に両方のテキストエリアに同じ文字を入れてボタンを押して欲しい、そして各テキストエリアは、それが入力されたとおりに同じテキストを表示しますが、異なるフォント/アルファベット

<div ID="keyboard"> 
    <div id="button-row1"> 
    <button class="letter" ID="_a" value="A"> 
    <span class="latinFont">A</span> | <span class="specialFont">A</span> 
    </button> 
    <button class="letter" ID="_b" value="B"> 
    <span class="latinFont">B</span> | <span class="specialFont">B</span> 
    </button> 
    <button class="letter" ID="_c" value="C"> 
    <span class="latinFont">C</span> | <span class="specialFont">C</span> 
    </button> 
    <button class="letter" ID="_d" value="D"> 
    <span class="latinFont">D</span> | <span class="specialFont">D</span> 
    </button> 
</div> 

</div> 

<div class="TypedTextFields" ID="TypedTextField"> 
    <textarea class="LatinTextField" Name="LatinLetters" readonly></textarea> 
<br/> 
<textarea class="SpecialTextField" Name="SpecialLetters" readonly></textarea> 
</div> 

Answer 1

このスニペットが役に立ちます。

var buttons = document.querySelectorAll('.letter'); 
 
var inputL = document.querySelector('.LatinTextField'); 
 
var inputS = document.querySelector('.SpecialTextField'); 
 
buttons.forEach(function(button){ 
 
    button.addEventListener('click', function(){ 
 
    switch(this.value){ 
 
     case 'bcsp': 
 
     inputL.value = inputL.value.substring(0, inputL.value.length - 1); 
 
     break; 
 
     case 'enter': 
 
     inputL.value += '\n'; 
 
     break; 
 
     default: 
 
     inputL.value += this.value; 
 
    } 
 
    
 
    inputS.value = inputL.value; 
 
    }) 
 
});

/**** 
 
* Add your latin and special fonts * 
 
****/ 
 

 
.latinFont { 
 
    /* use your latin font-family name */ 
 
    font-family: 'Times New Roman'; 
 
} 
 
.specialFont { 
 
    /* use your spacial font-family name */ 
 
    font-family: Impact; 
 
}

<div ID="keyboard"> 
 
    <div id="button-row1"> 
 
    <button class="letter" ID="_a" value="A"> 
 
    <span class="latinFont">A</span> | <span class="specialFont">A</span> 
 
    </button> 
 
    <button class="letter" ID="_b" value="B"> 
 
    <span class="latinFont">B</span> | <span class="specialFont">B</span> 
 
    </button> 
 
    <button class="letter" ID="_c" value="C"> 
 
    <span class="latinFont">C</span> | <span class="specialFont">C</span> 
 
    </button> 
 
    <button class="letter" ID="_d" value="D"> 
 
    <span class="latinFont">D</span> | <span class="specialFont">D</span> 
 
    </button> 
 
    <button class="letter" ID="_enter" value="enter"> 
 
    <span>&lt;-|</span> 
 
    </button> 
 
    <button class="letter" ID="_bcsp" value="bcsp"> 
 
    <span>&lt;-</span> 
 
    </button> 
 
</div> 
 

 
</div> 
 

 
<div class="TypedTextFields" ID="TypedTextField"> 
 
    <textarea rows="4" class="LatinTextField latinFont" Name="LatinLetters" readonly></textarea> 
 
<br/> 
 
<textarea rows="4" class="SpecialTextField specialFont" Name="SpecialLetters" readonly></textarea> 
 
</div>

Answer 2

に私はあなたが達成することができると思いますこれはテキストエリアでCSSを使うだけです。例：

.LatinTextField { 
    font-family: 'Some Font'; 
} 
.SpecialTextField { 
    font-family: 'Some Other Font'; 
} 

JavaScriptがあれば、両方のテキストエリアに同じことをすることができ、CSSは重い作業をします。また、関数が呼び出されるたびにオブジェクトに値を設定していないため、各要素の変数をグローバルに設定するとパフォーマンスが向上することにも注意してください。基本的な例を以下に示します。

<a onclick="addText('A');"> 
<span class="latinFont">A</span> | <span class="specialFont">A</span> 
</a> 
<textarea id="LatinTextField" Name="LatinLetters" readonly></textarea> 
<textarea id="SpecialTextField" Name="LatinLetters" readonly></textarea> 

<script> 
var latin = document.getElementById('LatinTextField'); 
var special = document.getElementById('SpecialTextField'); 
function addText(letter) { 
    latin.innerHTML += letter; 
    special.innerHTML += letter; 
} 
</script>