向文本框添加永久前缀

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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 (ie 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.net/index.php/javascript-getting-and-setting-caret-position-in-textarea Binding arrow keys in JS/jQuery