Comment est-ce que je fais un clavier sur-scren containint deux polices?

Question

Je fais un outil de traduction pour les alphabets fantasy. L'idée est d'avoir un clavier à l'écran avec chaque bouton contenant chaque lettre dans l'alphabet latin et l'alphabet devant être traduits. Le texte est ensuite envoyé dans deux champs de texte, en tapant simultaneousley dans les deux alphabets (un dans chaque champ de texte), étant ainsi capable de traduire à la fois en lettres latines et dans la police de fantaisie, en fonction de votre traduction a besoin

J'ai le HTML de base tout a fonctionné, et j'ai un certain nombre de polices que je veux employer pour ceci (attatched par CSS), mais la fonctionnalité réelle m'échappe.

Je veux essentiellement une presse de bouton pour mettre le même caractère dans les deux zones de texte, et chaque zone de texte affiche le même texte tel qu'il est tapé, mais dans différentes polices/alphabets

<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

Espérons que cet extrait vous aidera.

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

Je pense que vous pouvez accomplir ceci en utilisant juste CSS sur les zones de texte. Par exemple:

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

Puis dans votre javascript, vous pouvez faire la même chose à la fois textareas et le CSS fait le levage de charges lourdes. Il convient également de noter que la définition d'une variable globalement pour chaque élément aidera les performances car vous ne remplissez pas l'objet chaque fois que la fonction est appelée. Voici un exemple de base:

<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>