-3

I want to make input text box in primefaces which only can take mobile number with country code. The format is +NN-NNNNNNNNNN, e.g., +91-9876123456. User could not type any other characters except the mentioned. I've tried with some Javascript, but the result did not satisfy me. By, How to disable special characters and alphabets in Primefaces input text?

In this question, they have mentioned all the thing is perfect, but delete and movement of cursor is not happened here.

Moreover I do not want to use inputMask, behavior of this component is not exact with the text, although you have any better suggestion with this component then kindly provide.

Community
  • 1
  • 1
anuvabg
  • 129
  • 1
  • 1
  • 8

2 Answers2

0

If you need to match that exact pattern, I would probably check on every keypress. Just make sure it's clear to the user that they need to match a pattern or they may get annoyed when their keys don't seem to work.

$("#test").on("keypress", function(e) {
    var match = [48,49,50,51,52,53,54,55,56,57];
    var insert = '';
    if (this.value.length >= 14) {
      return false;
    }
    if (this.value.length === 0) {
      if (e.which === 43) {
        return true;
      }
      insert = '+'
    }
    if (this.value.length === 3) {
      if (e.which === 45) {
        return true;
      }
        insert = "-";
    }
    if (match.indexOf(e.which) === -1) {
      return false;
    }
    this.value += insert;
    return true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test"></input>
simpleManderson
  • 436
  • 3
  • 8
  • Tried to run this code by "Run code snippet" but I could not type anything in the textbox. – anuvabg Apr 15 '15 at 07:56
  • You have to type the + first, per your requirements. We could make the + and - autofill instead, which probably makes more sense :) – simpleManderson Apr 15 '15 at 19:26
  • Thank you, this is perfect with my requirement – anuvabg Apr 16 '15 at 05:13
  • Can you tell me it is working for Primefaces? I've faced some problem to do this in Primefaces. Function is not called from the – anuvabg Apr 16 '15 at 08:54
  • Used jQuery like this $("#{facesContext.externalContext.response.namespace}:advocateRegistration:mobileNo").on("keypress", function(e) { alert("test"); var match = [ 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 ]; var insert = ''; if (this.value.length >= 14) { return false; } if (this.value.length === 0) { if (e.which === 43) { return true; } insert = '+' } if (this.value.length === 3) { if (e.which === 45) { return true; } insert = "-"; } if (match.indexOf(e.which) === -1) { return false; } this.value += insert; return true; }); – anuvabg Apr 16 '15 at 08:58
0

You should give a look at Forza, they did some really interesting implementation for phone input with forced synthax like +() ____ ____ :

http://forza.ndevrstudios.com/#/form-masks

sebastienbarbier
  • 6,542
  • 3
  • 29
  • 55
  • thanx for the reply. I've also used the inputmask in Primefaces. but I do not want to show the underline, +, (, ) in the text box. – anuvabg Apr 15 '15 at 05:25