JQuery 切换数字和字符输入答案

【问题标题】：JQuery toggling number and character inputJQuery 切换数字和字符输入
【发布时间】：2016-12-06 19:10:58
【问题描述】：

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

我有一个 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');
        }

    }
});

【问题讨论】：

标签： javascript jquery html validation

【解决方案1】：

它不起作用的原因是事件已经附加到元素。移除类不会移除已经关联到元素的事件。

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

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

【讨论】：

@KimCarlo：很高兴它有帮助:)

【解决方案2】：

当 on change 事件被触发时，你的类被移除，但已经添加到输入框的行为将保留在那里，直到我们刷新页面。

您可以通过包含实现此目的的一种方法

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

何时触发 on change 事件。

【讨论】：