在開發(fā)移動端網(wǎng)站或者應用時，軟鍵盤是非常重要的一個元素。在輸入框被點擊時，軟鍵盤應當自動彈出并且與輸入框大小相同，同時確保頁面布局不被遮擋。接下來我們將使用 CSS 實現(xiàn)這一功能。

首先我們需要為輸入框設(shè)置一個類：

.input{
width: 80%;
margin: 20px auto;
border: 1px solid #ddd;
padding: 10px;
font-size: 16px;
}

然后我們需要為軟鍵盤設(shè)置一個類，并且將其隱藏。在輸入框被點擊時，我們將該元素的位置定位在底端并且展示它。為了防止頁面布局被遮擋，我們需要將頁面的滾動條設(shè)置為隱藏。

.keyboard{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
max-height: 60%;
background: #fff;
box-shadow: 0 -2px 4px rgba(0,0,0,.2);
overflow: auto;
transition: transform .3s ease;
transform: translateY(100%);
z-index: 9999
}
.keyboard.show{
transform: translateY(0)
}
body{
overflow: hidden;
}

接下來我們需要使用 JavaScript 為輸入框添加點擊事件，并且在事件處理程序中展示軟鍵盤：

const input = document.querySelector('.input');
const keyboard = document.querySelector('.keyboard');
input.addEventListener('click', () =>{
keyboard.classList.add('show');
});

最后我們需要為軟鍵盤添加功能鍵，例如刪除、確認等。這里我們以刪除鍵為例：

1
2
3
刪除
.del-key{
background: red;
color: #fff;
}
.del-key:hover{
cursor: pointer;
}
document.querySelector('.del-key').addEventListener('click', () =>{
const input = document.querySelector('.input');
input.value = input.value.slice(0, -1);
});

至此我們已經(jīng)完成了軟鍵盤的實現(xiàn)。我們可以根據(jù)具體需求添加更多的功能鍵，并且優(yōu)化設(shè)計放置位置、顏色等樣式。