Question

我们正在显示文本字段以输入邮政编码。

我们希望只使用数字＆amp; 6位数。

表示6位数后，不允许输入其他数字，也不允许输入任何符号或字母。

    <input name="zipcode" size="17" type="text" id="zipcode" value="<?php echo Mage::getModel('core/cookie')->get('zip'); ?>" 
maxlength="10" class="input-text" placeholder="<?php echo $this->__('Enter ZIP Code'); ?>"/>
<button type="button" name="zip-check" title="Check" class="button" id="zip-check" ><span><?php echo $this->__('Check'); ?></span></button>
<div id="delivery-message"></div>

脚本

Event.observe('zip-check', 'click', function(event){
        new Ajax.Request("<?php echo $this->getUrl('checkdelivery/index/index') ?>", {
            method: "get",
            parameters: {zipcode : $('zipcode').value },
            onSuccess: function(transport) {
                 var json = transport.responseText.evalJSON();
                 $('delivery-message').update(json.message);                 
                 $('delivery-message').setStyle({ color: json.color});
                 $('delivery-html').update(json.html);  
            }
        });
    });

我试过class="input-text validate-length maximum-length-6 minimum-length-6 validate-digits"，但它确实对我有用

Answer 1

使用输入框添加此行代码

maxlength="6" onkeypress="return isNumber(event)" title="Invalid ZIP code"

<script>
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
}
return true;
}
</script>

它应该有效。

Answer 2

您可以使用HTML5属性限制input的字符数量和类型（数字），如下所示：

<input name="zipcode" size="17" type="text" maxlength="6" placeholder="ZIP Code" pattern="\d{6}" />

maxlength限制input字段的最大字符数 pattern限制input允许的字符类型。在这种情况下，只有输入六位数时才有效。但是，这似乎最初只在提交表单时验证，而不是在输入时验证。

有关input字段和属性的更多信息，请访问：http://www.w3schools.com/tags/tag_input.asp

要限制输入无效字符，您需要使用JavaScript。可以在此处找到一个工作示例：http://codepen.io/michewl/pen/jrEQgd/

JavaScript部分使用jQuery来监听keydown-Event并防止在input中插入任何非数字字符。

您需要按如下方式更改HTML：

<input name="zipcode" size="17" type="text" id="zipcode" value="<?php echo Mage::getModel('core/cookie')->get('zip'); ?>" maxlength="6" class="input-text" placeholder="<?php echo $this->__('Enter ZIP Code'); ?>" pattern="\d{6}"/>
<button type="button" name="zip-check" title="Check" class="button" id="zip-check" ><span><?php echo $this->__('Check'); ?></span></button>

并添加以下JavaScript：

<script>
    $("#zipcode").keydown(function(event) {
        return /\d/.test(event.key);
    });
</script>

根据您在上述评论中提到的链接，我假设jQuery可用。

textfield不允许在6个数字后输入数字

2 个答案: