Ограничьте ввод пользователя в текстовом поле, чтобы подтвердить шаблон

Question

У меня есть текстовое поле с идентификатором countryCode в моем jsp для ввода кода страны по номеру телефона. Пользователь должен иметь возможность вводить код страны в виде цифр или цифр с префиксом +. например: 91 или +91 или 1 или +1 и т. Д. Пожалуйста, предложите функцию jquery, чтобы ограничить пользователя i/p при вводе, чтобы принять только этот шаблон.

Попытался использовать нижеследующий код.

$('input[id="countryCode"]').bind('keypress', function (event) { 
     var regex = new RegExp("^[+0-9\b]+$"); 
     var str= $("#countryCode").val(); 
     var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); 
     if (!regex.test(key) || (key=="+" && str.length>0)) { 
      event.preventDefault(); 
      return false; 
     } 
    }); 

Но после ввода 91, я не мог войти + в качестве первого символа

Answer 1

Вы должны сравнить напечатанный характер, и это положение, чтобы определить, является ли действительным. Проверка (key=="+" && str.length>0) - это ошибка, если в текстовом поле уже есть контент, и пользователь пытается ввести + в первой позиции.

Рабочая скрипка: http://jsfiddle.net/kjw2j9as/2/.

HTML:

<input id="countryCode" type="text"> 

Javascript:

$('input[id="countryCode"]').bind('keypress', function (event) { 
    var regex = new RegExp("^[+0-9\b]+$"); 
    var str= $("#countryCode").val(); 
    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode); 
    if (!regex.test(key)){ 
     event.preventDefault(); 
     return false; 
    } 
    else if (str.length > 0) { 
     if (key == "+" && $(this).getCursorPosition() != 0){ 
      event.preventDefault(); 
      return false; 
     } 
    } 
}); 

// Borrowed from: http://www.fourthbottle.com/2014/03/how-to-get-cursor-position-in-textbox.html 
$.fn.getCursorPosition = function() { 
    var pos = 0; 
    var el = $(this).get(0); 
    // IE Support 
    if (document.selection) { 
     el.focus(); 
     var Sel = document.selection.createRange(); 
     var SelLength = document.selection.createRange().text.length; 
     Sel.moveStart('character', -el.value.length); 
     pos = Sel.text.length - SelLength; 
    } 
    // Firefox support 
    else if (el.selectionStart || el.selectionStart == '0') 
     pos = el.selectionStart; 
    return pos; 
}