What I am trying to achieve is to force a textbox to start with a prefix ( country telephone code ) and to make this permanent, meaning that the user cannot bypass this. For example, the Phone textbox should always start with "+45" and after that the user can add the phone number. How to prevent it from deleting the code, by any means?

What I done so far, using jQuery:

//attach event on phone text boxes
$(document).delegate(".phone", "keyup", function(event){

var target = $(this);

var value = target.val().trim();

if (value.indexOf(CONSTANTS.DANISH_PHONE_CODE) == -1) {
    //country code not found

    //if the user starts deleting the country code 
    if (value.indexOf("+") == 0){
        value = "";
    }

    //if the user types something in front of the country code, put the country code at the end
    value = value.replace(CONSTANTS.DANISH_PHONE_CODE, "");

    //phone doesn't start with +45
    value = CONSTANTS.DANISH_PHONE_CODE + value;

    target.val(value); 
}


});

But the problem is that the user can delete the plus sign and the prefix is put automatically at the start so we will have +4545. Do you know an elegant way of achieving this? Thanks.

What I am trying to achieve is to force a textbox to start with a prefix ( country telephone code ) and to make this permanent, meaning that the user cannot bypass this. For example, the Phone textbox should always start with "+45" and after that the user can add the phone number. How to prevent it from deleting the code, by any means?

What I done so far, using jQuery:

//attach event on phone text boxes
$(document).delegate(".phone", "keyup", function(event){

var target = $(this);

var value = target.val().trim();

if (value.indexOf(CONSTANTS.DANISH_PHONE_CODE) == -1) {
    //country code not found

    //if the user starts deleting the country code 
    if (value.indexOf("+") == 0){
        value = "";
    }

    //if the user types something in front of the country code, put the country code at the end
    value = value.replace(CONSTANTS.DANISH_PHONE_CODE, "");

    //phone doesn't start with +45
    value = CONSTANTS.DANISH_PHONE_CODE + value;

    target.val(value); 
}


});

But the problem is that the user can delete the plus sign and the prefix is put automatically at the start so we will have +4545. Do you know an elegant way of achieving this? Thanks.

• javascript
• jquery
• textbox
• prefix

• A determined user can always bypass it by using the browser's DOM editor. What you really should do is add the prefix to the page as static HTML, and to the data on the server-side after the form is submitted. – Blazemonger Commented Jul 18, 2012 at 14:39
• 2 Why bother? Just check the input on blur and if the first three characters aren't +45, then prepend them. – j08691 Commented Jul 18, 2012 at 14:40
• Did you decide on a solution? If so you should accept an answer. – Thomas Commented Jul 19, 2012 at 7:08

3 Answers 3

You can absolutely position the text (in a span) over the textbox and add a left-margin to it.

This way users won't be able to remove it. But you'll have to add it server side.

Add the +45 as static html before the field. Required the user to enter "the rest" of the number (not the +45).

If necessary, add the +45 server side before persisting the value. Similarly, remove the +45 when editing.

JSFiddle Example

This should actively keep them from deleting "+45" instead of trying to fix the problem after the user as changed it. Upon keypress, determine character position, if the position is too early in the string (i.e. inside the "+45" as oppose to after it) then don't allow the keypress, unless that key is the left or right arrow keys.

Acquired resources:

http://blog.vishalon/index.php/javascript-getting-and-setting-caret-position-in-textarea Binding arrow keys in JS/jQuery