маска формы jquery 4 цифры - в выделенном тексте - не может вставить

то, что я пытаюсь сделать, - это простое поле формы для ввода почтового номера, которое позволяет вводить максимум 4 цифры.

Проверьте мой jsfiddle. Он работает нормально, единственная проблема заключается в том, что когда внутри полные 4 цифры и текст внутри выбран, я не могу переопределить его при вводе числа, мне нужно сначала нажать удалить, а затем вставить числа

http://jsfiddle.net/vCceN/2/

и другое, не имеющее отношения к делу, как я могу запретить пользователю вводить 0 (ноль) в качестве первой цифры?


Я использовал решение Кундана и добавил (на мой взгляд) лучшее решение для устранения нулевой проблемы:

$(document).ready(function(){
    var IsSelect = false;
    $('#fld_1').select(function(){
        IsSelect = true;
    }).keypress(function (event){

        if( event.which==8 || event.which==0 || event.which == 27) return true;
        if($(this).val().length > 3 && !IsSelect) return false;
        if(IsSelect && event.which == 48) return false;
        if($(this).val().length == 0 && event.which == 48) return false;

        var regex = new RegExp("^[0-9]");

        var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        if (!regex.test(key)) {
            event.preventDefault();
            return false;
        }
        IsSelect = false;
    });

});

РАБОЧАЯ ДЕМО

Он работает почти идеально ... единственная проблема заключается в том, что пользователь ЧАСТИЧНО выбирает текст внутри поля ввода (например, последние две цифры ... чем он не может начать писать с нуля, но это должно быть возможно, так как он вставляет в третья буква а не в начале


person DS_web_developer    schedule 10.08.2012    source источник


Ответы (1)


это исправит ваши обе проблемы

$(document).ready(function(){
  var IsSelect = false;
  $('#fld_1').select(function(){
     IsSelect = true;
  });
  $('#fld_1').keypress(function (event){

    if( event.which==8 || event.which==0 || event.which == 27) return true;
    if($(this).val().length > 3 && !IsSelect) return false;

    var regex = new RegExp("^[0-9]");

    var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
    if (!regex.test(key)) {
        event.preventDefault();
        return false;
    }
    IsSelect = false;
  });

  $('#fld_1').keyup(function (event){
    $(this).val(this.value.replace(/\b0+/g, ""));     
  });
});

Рабочая демонстрация

person Kundan Singh Chouhan    schedule 10.08.2012
comment
приятно, СПАСИБО! Мне не нравится замена начального нуля ... решение isSelect, тем не менее, ВЕЛИКОЛЕПНО! спасибо - person DS_web_developer; 10.08.2012
comment
Я протестировал его, и у меня возникла проблема ... он не работает, когда ввод автоматически фокусируется (выделение текста) - person DS_web_developer; 10.08.2012
comment
Хорошо, для моей задачи с ведущим нулем я добавил после if ($ (this) .val (). Length ›3 &&! IsSelect); это: if (IsSelect && event.which == 48) return false; if ($ (this) .val (). length == 0 && event.which == 48) return false; - person DS_web_developer; 11.08.2012