JS中的虚拟键盘，但带有图像

Posted 2023-03-17

【中文标题】JS中的虚拟键盘，但带有图像

【英文标题】：virtual keyboard in JS but with images

【发布时间】：2021-06-24 11:18:05

【问题描述】：

我想用 html、CSS 和 javascript 制作一个虚拟键盘。但是，有一个转折。而不是键盘上的字母，我想用我自己选择的图像替换它们。所以说，

instead of letter "a", i have an image of APPLE
instead of letter "s", I have an image of SNAKE

能够做到。

【问题讨论】：

如果键盘上的所有内容都将由图像表示，请将 keyLayout 中的元素替换为图像的 src。然后创建您的 html 并为每个键插入 src

你能展示更多你的代码吗？目前尚不清楚您显示的位实际上是如何使用/做什么的。

【参考方案1】：

您可以使用 HTML 和 CSS Grid 来做到这一点，您只需要图像和可以从中取出它们的文件，除非您的网站具有交互性，否则您将不需要 javascript

【参考方案2】：

这是你的想法吗？

var elements = document.getElementsByClassName("key");

var myFunction = function(event) 
let text = document.getElementById('text')
text.innerText = text.innerText + event.target.id
   
;

for (var i = 0; i < elements.length; i++) 
    elements[i].addEventListener('click', myFunction, false);

.keyboard
display:flex;
justify-content:center;


img
border:solid 2px green;

<div class='keyboard'>
<img src="https://unsplash.it/50/50.jpg?image=1" id='a' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=2" id='b' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=3" id='c' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=4" id='d' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=5" id='e' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=6" id='f' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=7" id='g' class='key'> 
</div>
<div class='keyboard'>
<img src="https://unsplash.it/50/50.jpg?image=81" id='h' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=82" id='i' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=83" id='j' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=84" id='k' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=85" id='l' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=88" id='m' class='key'> 
<img src="https://unsplash.it/50/50.jpg?image=87" id='n' class='key'> 
</div>

<div id='text'>

</div>