Add a permanent prefix to a textbox

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.

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, Jul 18 '12 at 14:39
Why bother? Just check the input on blur and if the first three characters aren't `+45`, then prepend them. — j08691, Jul 18 '12 at 14:40
Did you decide on a solution? If so you should accept an answer. — Thomas, Jul 19 '12 at 07:08

score 3 · Answer 1 · answered Jul 18 '12 at 14:40

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.

answered Jul 18 '12 at 14:40

Thomas

8,426
1
25
49

I mainly used it for icons inside textboxes, like a magnifying glass inside a search box. But I don't see why you shouldn't use it for text. @flem's solution is similar except for the positioning which is a small graphics detail. – Thomas Jul 18 '12 at 15:07

score 3 · Answer 2 · answered Jul 18 '12 at 14:43

3

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.

answered Jul 18 '12 at 14:43

Paul Fleming

24,238
8
76
113

score 0 · Accepted Answer · edited May 23 '17 at 11:45

0

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

edited May 23 '17 at 11:45

Community

1
1

answered Jul 18 '12 at 14:49

Corey Ogburn

24,072
31
113
188

In GoogleChrome if I delete the 5 (from +45) all input is locked. Also, this depends on javascript being enabled. If the feature is _necessary_ then the solution should ultimately be server side. – Paul Fleming Jul 18 '12 at 15:03
That's quite dangerous. What if the user presses the Tab or Enter key? There are about 20 keys the user should be allowed to press and you'd have to define all of them. Also, pasting by right clicking still works. – Thomas Jul 18 '12 at 15:05

Add a permanent prefix to a textbox

3 Answers3