jquery Поле ввода поля

Я новичок в JQUERY. У меня есть требование как на основе ввода, то же поле ввода необходимо изменить без отправки формы.jquery Поле ввода поля

Если номер начинается с 33 или 55 или 81, отобразите его как (xx) xxxx-xxxx, для всего другого шаблона номера (xxx) xxx-xxxx.

Может ли кто-нибудь помочь мне в этом.

Я попробовал этот код:

<html> 
<head> 
<script src="jquery-1.11.3.min.js" type="text/javascript"></script> 
<script src="jquery.maskedinput.js" type="text/javascript"></script> 
</head> 
<body> 

<h1>Validation</h1> 

<input id="phone" type="number"> 
<script> 
$(document).ready(function(){ 
    var twoNumbers = $(this).attr("phone").substr(0, 2); 
    if(twoNumbers == 33 || twoNumbers == 55 || twoNumbers == 81){ 
     $("#phone").mask("(99) 9999-9999"); 
    }else{ 
     $("#phone").mask("(999) 999-9999"); 
    } 
}); 
</script> 
</body> 
</html>

Пожалуйста, исправьте этот HTML

источник

2015-12-05 Mark Nicholas

Есть либо слишком много возможных ответов, или хорошие ответы были бы слишком долго этот формат. Пожалуйста, добавьте детали, чтобы сузить набор ответов или изолировать проблему, на которую можно ответить в нескольких абзацах. –

@ PraveenKumar. Позвольте мне пояснить это подробнее: есть поле ввода. Когда я ввожу номера мобильных телефонов, начиная с 33 или 55 или 81, я должен начать отображать эти числа в формате (xx) xxxx-xxxx. Другие цифры будут отображаться как (xxx) xxx-xxxx без отправки формы –

Вот что я говорю. Любой из плагина jQuery для маски ввода будет делать: http://digitalbush.com/projects/masked-input-plugin/ - Проверьте это. –

Все идеально, но пожалуйста, вы можете прикрепить его к keyup случае текстового поля? Также это $(this).val().substr(0, 2); не тот, который вы использовали. Пожалуйста, убедитесь, что вы помещаете маску только в том случае, если на входе находятся > 2 символов.

<script> 
    $(document).ready(function() { 
    $("#phone").keyup(function() { 
     $(this).attr("value", $(this).val()); 
     if ($(this).val().length > 2) { 
     var twoNumbers = $(this).val().substr(0, 2); 
     if (twoNumbers == 33 || twoNumbers == 55 || twoNumbers == 81) { 
      console.log("First: " + twoNumbers); 
      $("#phone").inputmask({ 
      mask: "(99) 9999-9999" 
      }); 
     } else { 
      console.log("Second: " + twoNumbers); 
      $("#phone").inputmask({ 
      mask: "(999) 999-9999" 
      }); 
     } 
     } 
    }); 
    }); 
</script>

Fiddle: http://output.jsbin.com/fujunojelu

источник

2015-12-05 22:26:56

Но изменение не происходит в текстовом поле –

@MarkNicholas На самом деле проблема с плагином: 'Uncaught InvalidStateError: не удалось выполнить 'setSelectionRange' в 'HTMLInputElement': тип входного элемента ('number') не поддерживает выбор . –

Я пытаюсь это исправить. –

Почему изобрести водоворот, вы его уже. Вы можете выполнить это с помощью одного из уже сделанных плагинов jquery.

Это один из них:

http://digitalbush.com/projects/masked-input-plugin/

Скачать его и загрузить его на сервер. Поместите ссылку на плагин в голове вашей страницы:

<script src="jquery.maskedinput.js" type="text/javascript"></script>

Теперь вы можете маскировать входы так, как вы хотели:

jQuery(function($){ 
    $("#date").mask("99/99/9999", {placeholder:"mm/dd/yyyy"}); 
    $("#phone").mask("(999) 999-9999"); 
    $("#tin").mask("99-9999999"); 
    $("#ssn").mask("999-99-9999"); 
});

Я понимаю, что вы хотите сделать некоторое условное маскирование, как если бы число начиналось с 85. Если вам также нужна помощь для этого, отправьте также свою разметку HTML.

источник

2015-12-05 21:25:20 Franco

-1

использование размытия событие для ввода отформатируйте значение входного значения в соответствии с требуемым рисунком

$("#InputID").blur(function() { 

    $(this).val() // check if input value is equal required pattern use any format JS plugin 
});

источник

2015-12-05 21:36:02

Найдено решение .. Этот код работает хорошо для меня:

<html> 
<head> 
<script src="jquery-1.11.3.js"></script> 
<script src="jquery.catcher.js" type="text/javascript"></script> 
<script src="jquery.inputmask.bundle.js"></script> 
</head> 
<body> 
<h3>Mobile Number Formatting</h3> 
<input id="phone" type="text"> 
<script> 
    $(document).ready(function() { 
    $("#phone").keyup(function() { 
     $(this).attr("phone", $(this).val()); 
     var twoNumbers = $(this).val().substr(0, 3); 
     if (twoNumbers == '(33' || twoNumbers == '(55' || twoNumbers == '(81') { 
      $("#phone").inputmask({ 
      mask: "(99) 9999-9999" 
      }); 
     } else { 
      $("#phone").inputmask({ 
      mask: "(999) 999-9999" 
      }); 
     } 
    }); 
    }); 
</script> 
</body> 
</html>

источник

2015-12-07 20:32:56

jquery Поле ввода поля

ответ

Смежные вопросы