我该如何制作一个简洁的键盘包含双重字体?
问题描述:
我正在为幻想字母翻译工具。这个想法是有一个屏幕键盘,每个按钮都包含拉丁字母和需要翻译的字母表中的每个字母。然后 文本被发送到两个文本字段,(在任何文本框一个)输入两个字母simultaneousley,从而能够转化俱进拉丁字母和进入幻想的字体,这取决于你的翻译需要我该如何制作一个简洁的键盘包含双重字体?
我有基本的HTML全部制定出来了,并且我有很多字体我想用于此(通过CSS来处理),但实际的功能无法实现。
我基本上要按下一个按钮把相同的字符到两个文本域,每个textarea的显示相同的文本,因为它正在打字,但在不同的字体/字母表
<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>
答
希望这段代码能帮助你。
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><-|</span>
</button>
<button class="letter" ID="_bcsp" value="bcsp">
<span><-</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>
答
我认为你可以做到这只需在textareas上使用CSS即可。例如:
.LatinTextField {
font-family: 'Some Font';
}
.SpecialTextField {
font-family: 'Some Other Font';
}
然后在你的javascript中,你可以对textareas做同样的事情,并且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>
这是确切的解决方案,我希望能找到 ,但我发现我是缺乏一种特殊类型的按钮......我如何才能退格的功能?它是一个字符串-1,但我的微弱尝试迄今为止尚未结实 –
if(this.id ==“_bcksp”){inputL.value = inputL.value.substring(0,str.length - 1); inputS.value = inputS.value.substring(0,str.length - 1); } else { inputL.value + = this.value; inputS.value + = this.value; } 这是退格脚本,因为它现在看起来 - 无功能 –
if(this.id ==“_bcksp”){inputL.value = inputL.value.substring(0,inputL.value.length - 1); } else {inputL.value + = this.value;} inputS.value = inputL.value;我重构你的代码。 inputS.value始终与inputL.value相同 –