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

I'm creating a simple form to allow customers to input a number into a form field, which should have a limit of 6 characters.

The numbers are submitted to our database, so the customer needs to see them before submitting.

I have used the script below to create the number submission into the form input text field (which can then be sent to the DB). I went for this method as the majority of our audience on on mobiles, so i didn't think a standard text field input was user friendly (open to any alternatives on this).

<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>

The maxlength function just doesn't work when the numbers are added to the 'ans' input in this way and i have tried to look for JS and JQuery solutions, and the only one i can find replaces the input with an error after the character limit has been exceeded - rather than just limit the number of inputs a user can add.

Can anyone help?

Thanks

Steve

You can much more easily use a type="number" or type="tel" to allow mobile users to enter numbers. It will bring up a "keypad", much like you tried to create here:

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

What you need to do is write a function which checks the length of the answer, and then doesn't allow the user to add more numbers if they have exceeded the limit. Additionally, you can optimize your code a little better (in my opinion) if you call this same function onClick and just append the value of your button. Attached is some code I have to do something very similar to what you need (I think). Side note: I never encourage using tables to format inputs, but this was the simplest way to whip up an example. Hopefully this helps you :)

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
    }
}