onClick按钮输入的最大长度限制 - Maxlength limit for onClick button input

我正在创建一个简单的表单，允许客户在表单字段中输入一个数字，该字段应该有6个字符的限制。

这些数字被提交到我们的数据库，因此客户需要在提交之前看到它们。

我已经使用下面的脚本创建数字提交到表单输入文本字段(然后可以发送到DB)。我选择了这种方法，因为我们的大多数用户都在手机上，所以我不认为一个标准的文本字段输入是用户友好的(在这方面可以考虑任何替代方案)。

<input name="answers" type="text" size="6" maxlength="6"><br>
<p><input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'"></p>
<p><input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'"></p>
<p><input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'"></p>
<p><input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset"></p>
<p><input type="submit" name="submit" value="Submit"></p>

maxlength函数只是不工作，当数字被添加到'ans'输入以这种方式，我试图寻找JS和JQuery的解决方案，我能找到的唯一一个替换输入错误后的字符限制已超过-而不仅仅是限制输入用户可以添加的数量。

有人能帮忙吗?

感谢史蒂夫

您可以更容易地使用type="number"或type="tel"来允许移动用户输入数字。它会弹出一个"键盘"，就像你在这里创建的一样:

<input type="number" max="999999">
<input type="tel" max="999999">

你需要做的是写一个函数来检查答案的长度，然后不允许用户添加超过限制的数字。此外，如果您调用相同的函数onClick并附加按钮的值，您可以更好地优化代码(在我看来)。附件是一些代码，我必须做的事情非常类似于你需要什么(我认为)。旁注:我从不鼓励使用表来格式化输入，但这是编写示例的最简单方法。希望这对你有帮助:)

HTML:

<input type="text" placeholder="123-456-7890" id="inputMethod" />
    <table>
        <tr class="numberPadRow">
            <td><button type="button" value="1" onclick="appendValue(this);"> 1 </button></td>
            <td><button type="button" value="2" onclick="appendValue(this);"> 2 </button></td>
            <td><button type="button" value="3" onclick="appendValue(this);"> 3 </button></td>
        </tr>
        <tr class="numberPadRow">
            <td><button type="button" value="4" onclick="appendValue(this);"> 4 </button></td>
            <td><button type="button" value="5" onclick="appendValue(this);"> 5 </button></td>
            <td><button type="button" value="6" onclick="appendValue(this);"> 6 </button></td>
        </tr>
        <tr class="numberPadRow">
            <td><button type="button" value="7" onclick="appendValue(this);"> 7 </button></td>
            <td><button type="button" value="8" onclick="appendValue(this);"> 8 </button></td>
            <td><button type="button" value="9" onclick="appendValue(this);"> 9 </button></td>
        </tr>
        <tr class="numberPadRow">
            <td><button type="button" value="0" onclick="appendValue(this);"> 0 </button></td>     
        </tr>
    </table>

Javascript:

function appendValue(sender) {
    if ($('#inputMethod').val().length < 6) {
        $('#inputMethod').val($('#inputMethod').val() + "" + $(sender).val());
    } else {
        //set warning, the user tried to add a number past the limit
    }
}