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
}
}
相关文章:
- WAMP响应内容长度限制
- 我可以设置HTML5文件上传的视频长度限制吗
- 在 AngularJS 中输入的数字的限制长度
- 文本长度限制在我的 instafeed 模板中不起作用
- 如何限制粘贴函数超过最大长度
- 将一行的长度限制在三个js中
- Ajax字符串长度限制
- Jquery将输入长度限制为n封电子邮件
- 使用字符串的替换方法时是否有长度限制
- 如何在点击带有长度的按钮时提醒用户
- 如何生成具有特定长度限制的所有可能组合的字母
- 如何通过输入的长度限制jQuery自动完成if条件
- 增加mailto:的IE URL长度限制
- 在JavaScript中格式化字符长度/限制
- 当达到最大长度限制时,更改输入字段样式
- 如何绕过铬邮件的最大长度限制
- Node.js HTTP Get URL长度限制
- 将文本长度限制为其容器大小
- onClick按钮输入的最大长度限制
- 字符串超过ajax POST长度限制