Hướng dẫn:
Bằng video:
Copy toàn bộ code vào mục Styling
⚠️Chú ý: ⚠️ Paste vào bên dưới của {{type: Tên trường thông tin của bạn}}
<div id = "buttonsArea">
<script>
var buttonList = ["a", "b", "c", "d", "e", "f", "g", "h", "i",
"j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w","x","y","z" ];
if (document.getElementById("typeans").tagName === "INPUT") {
for (var i = 0; i < buttonList.length; i++) {
const node = document.createElement("button");
const textnode = document.createTextNode(buttonList[i]);
node.appendChild(textnode);
node.classList.add('letterButton');
node.addEventListener('click', function(e) {
insertAtCursor(document.getElementById('typeans'), e.target.innerHTML);
});
document.getElementById("buttonsArea").appendChild(node);
};
}
function insertAtCursor(myField, myValue) {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
else if (myField.selectionStart || myField.selectionStart == '0') {
myField.value = myField.value.substring(0, startPos) +
myValue +
myField.value.substring(endPos, myField.value.length);
} else {
myField.value += myValue;
}
myField.focus()
myField.setSelectionRange(startPos + myValue.length, startPos + myValue.length);
}
</script>
<style>
.letterButton
{
background-color: #94dbe3;
color: black;
border: 1.5px solid #66dbe8;
padding: 4px 10px;
margin-left: 5px;
margin-top: 5px;
font-size: 14px !important;
border-radius: 6px;
font-family: "Baloo 2 SemiBold";
}
.letterButton
{
transition-duration: 0.5s;
}
.letterButton:hover
{
background-color: #f084a1;
color: black;
border: 1.5px solid #f084a1;
}
</style>
