Question

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

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

我使用下面的脚本在表单输入文本字段中创建数字提交（然后可以将其发送到数据库）。我在移动设备上采用这种方式作为大多数观众，所以我认为标准文本字段输入是用户友好的（对此有任何替代方案）。

<input name="ans" 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>

当数字被添加到＆＃39; ans＆＃39;时，maxlength功能不起作用。以这种方式输入并且我试图寻找JS和JQuery解决方案，并且我可以找到的唯一一个在超出字符限制后用错误替换输入 - 而不是仅限制用户可以添加的输入数量。

有人可以帮忙吗？

由于

史蒂夫

Answer 1

您需要做的是编写一个检查答案长度的函数，然后如果超过限制，则不允许用户添加更多数字。此外，如果您调用相同的函数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
    }
}

onClick按钮输入的最大长度限制

1 个答案: