<!DOCTYPE html>
<html>
<head>
<title>JavaScript 键盘演示</title>
</head>
<style>
body {
font-family: Arial, sans-serif;
}
#keyboard {
display: flex;
flex-direction: column;
align-items: center;
}
.row {
display: flex;
flex-direction: row;
}
.key {
margin: 5px;
padding: 10px;
border: none;
background-color: #f2f2f2;
color: #333;
font-size: 16px;
cursor: pointer;
}
.key:hover {
background-color: blue;
}
.inp {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
#inputField {
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s ease;
}
#inputField:focus {
border-color: #007bff;
outline: none;
}
.custom-button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
text-align: center;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.custom-button:hover {
background-color: #45a049;
}
</style>
<body>
<div class="inp">
<input type="text" id="inputField" placeholder="输入...">
<!-- <button onclick="clearInput()">X</button> -->
<button class="custom-button" onclick="clearInput()">clear</button>
</div>
<div id="keyboard"></div>
<script>
const keyboard = document.getElementById('keyboard');
const inputField = document.getElementById('inputField');
// 定义键盘布局
const keyboardLayout = [
['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
['z', 'x', 'c', 'v', 'b', 'n', 'm']
];
// 创建键盘按钮
keyboardLayout.forEach(row => {
const rowDiv = document.createElement('div');
rowDiv.classList.add('row');
row.forEach(key => {
const button = document.createElement('button');
button.classList.add('key');
button.innerHTML = key.toUpperCase();
button.addEventListener('click', () => {
if (key === 'Enter') {
inputField.value += '\n';
} else {
inputField.value += key;
}
});
rowDiv.appendChild(button);
});
keyboard.appendChild(rowDiv);
});
function clearInput() {
inputField.value = "";
}
</script>
</body>
</html>
原生js写一个简易键盘,不可拼音
于 2024-02-01 15:22:44 首次发布