javascript - 使用 Html/Java 创建小键盘的问题

标签 javascript html numpad

尝试制作一个小的数字键盘,如所附图片所示,作为我的 Javascript 练习的一部分。寻找可能修复或让我朝正确方向发展的帮助/提示,​​以获得具有工作重置功能的工作数字键盘。如果没有重置功能代码,我就可以在文本框中输入数字。但额外的代码失去了功能。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Q4</title>
</head>
<body>

<form action="" method="" name="Q4">

<table cellpadding="3" cellspacing="3" border="0">

        <td colspan="3"><input id=Key type="text" value="" maxlength="10" name="Key" /></td>

        <tr>
            <td> <input type="button" value="1" id="1" " style="font-size:25px;" onClick=addNumber(this); /></td>
            <td> <input type="button" value="2" id="2" " style="font-size:25px;" onClick=addNumber(this); /></td>
            <td> <input type="button" value="3" id="3" " style="font-size:25px;" onClick=addNumber(this); /></td>
        </tr>
        <tr>
            <td><input type="button" value="4" id="4" " style="font-size:25px;" onClick=addNumber(this); /></td>
            <td><input type="button" value="5" id="5" " style="font-size:25px;" onClick=addNumber(this); /></td>    
            <td><input type="button" value="6" id="6" " style="font-size:25px;" onClick=addNumber(this); /></td>
        </tr>
        <tr>
            <td><input type="button" value="7" id="7" " style="font-size:25px;" onClick=addNumber(this); /></td>
            <td><input type="button" value="8" id="8" " style="font-size:25px;" onClick=addNumber(this); /></td>
            <td><input type="button" value="9" id="9" " style="font-size:25px;" onClick=addNumber(this); /></td>
        </tr>
        <tr>
<td colspan="3"><input type="button" value="Reset" id="Reset" onClick=clearNumber(this); /> </td>
        </tr>

</table>

<script>
function addNumber(element){
    document.getElementById('Key').value = document.getElementById('Key').value+element.value;
                            }
function Reset {    
    document.getElementById("Key").reset();

}
</script>
</body>
</html>

最佳答案

试试这个..

function addNumber(element) {
    document.getElementById('Key').value = document.getElementById('Key').value+element.value;
}

function clearNumber() {    
    document.getElementById("Key").value = "";
}
<table cellpadding="3" cellspacing="3" border="0">

    <tr>
        <td colspan="3">
            <input id="Key" type="text" value="" maxlength="10" name="Key" />
        </td>
    </tr>

    <tr>
        <td>
            <input type="button" value="1" id="1" style="font-size:25px;" onclick="addNumber(this)" />
        </td>
        <td>
            <input type="button" value="2" id="2" style="font-size:25px;" onclick="addNumber(this)" />
        </td>
        <td>
            <input type="button" value="3" id="3" style="font-size:25px;" onclick="addNumber(this)" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="4" id="4" style="font-size:25px;" onclick="addNumber(this)" />
        </td>
        <td>
            <input type="button" value="5" id="5" style="font-size:25px;" onclick="addNumber(this)" />
        </td>
        <td>
            <input type="button" value="6" id="6" style="font-size:25px;" onclick="addNumber(this)" />
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="7" id="7" style="font-size:25px;" onclick="addNumber(this)" />
        </td>
        <td>
            <input type="button" value="8" id="8" style="font-size:25px;" onclick="addNumber(this)" />
        </td>
        <td>
            <input type="button" value="9" id="9" style="font-size:25px;" onclick="addNumber(this)" />
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <input type="button" value="Reset" id="Reset" onclick="clearNumber(this)" />
        </td>
    </tr>

</table>

关于javascript - 使用 Html/Java 创建小键盘的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59015099/

相关文章:

ios - 如何在 iOS Objective C 的数字键盘中禁用更改语言?

javascript - 保存模型后无法重新渲染主干 View

javascript - Node.js 代码保护 - 如何使 Node.js 部署仅在 V8 汇编程序中可恢复

javascript - 如何使用 CSS 隐藏元素溢出?

javascript - 检查用户是否第一次使用 Javascript 访问网站

javascript - 计算输入字段中的字符数,然后提交

javascript - AngularJS 和浏览器

javascript - 如何使用 React 在网站上显示固定的代码片段

javascript - 在html5中调用onclick按钮的函数

swift - 如何快速将完成按钮添加到数字键盘?