Question

如何在文本框中切换字符和数字输入？

我有一个JQuery函数，只允许输入数字

$('.numeric').on('input', function (event) { 
    this.value = this.value.replace(/[^0-9]/g, '');
});

我只在输入框中应用类numeric，它将限制字符输入。

我的问题是这个。

我有一个包含国家/地区列表的选择框

<select class="form-control" id="country_select" name="country">
    <option value="44">United Kingdom</option>
    <option value="681">Wallis and Futuna</option>
    <option value="967">Yemen</option>
    <option value="260">Zambia</option>
    <option value="263">Zimbabwe</option>
 </select>

每当我选择United Kingdom时，我想删除具有numeric类的输入框上的字符限制。我想允许在文本框中输入字母和数字

<input placeholder="Zip/Postal Code" class="numeric" id="company_zip" name="company_zip" type="text">

我有这个Jquery代码，但它不起作用。我试图删除numeric类以允许输入上的字母。但它没有用。

$('#country_select').change(function(){
    var zip = $('#company_zip');
    var country = $(this);
    $('#area_code').val($(this).val());

    if (country.val() == 44) {
        zip.removeClass('numeric');
    }else{
        if (!zip.hasClass('numeric')) {
            zip.addClass('numeric');
        }

    }
});

Answer 1

它没有奏效的原因是因为事件已经附加到元素上。删除类不会删除已经关联的事件到元素。

您应该在textbox的更改事件下检查选定的选项值：

var country = $('#country_select');
$('.numeric').on('input', function (event) { 
   if(country.val() == 44)
     this.value = this.value.replace(/[^0-9]/g, '');
});

Answer 2

当触发更改事件时，您的类将被删除，但是在我们刷新页面之前，已经添加到输入框的行为将保留在那里。

通过包含

，您可以实现这一目标

  ` $('.numeric').on('input', function (event) { 
       this.value = this.value.replace(/[^0-9]/g, '');
   }); `

触发更改事件时

JQuery切换数字和字符输入

2 个答案: