Keep default value in textbox on focus

Question

I created an input field (text) on a website with the default value "DE". Now i'm having the following problem.

<input type="text" id="iban" value="DE" />

When the user clicks in the textbox the default value "DE" should not be deleted and the user should only add numbers after the default value in the textbox. So i'm searching for a js function which makes the default value of a textbox as readonly. The user should not delete the default value.

If this is possible, how does it work?

I don't want that the value will be deleted on focus. I'm searching for a function where i can mark a part of a textbox as read only. And yes i searched for it, but I didn't found a solution for this. — proud, Apr 24 '13 at 07:01

score 5 · Answer 1 · answered Apr 24 '13 at 06:59

You can't make a part of the value as read-only... But if you want to use a simple solution (without javascript) you could use two inputs :

<input type="text" id="iban-prefix" value="DE" readonly/><input type="text" id="iban-value"/>

Arrange them using css and just concat the two values in your sever side.

OR :

A javascript solution : on your form use the "onsubmit" event to call a javascript function to check if the "DE" prefix is present in the value entered by the user and if not, add the "DE" prefix.

Hope this helps !

Danny Beckett · Accepted Answer · 2013-04-25T14:24:10.820

2

There is no need to use JavaScript. Simple HTML and CSS will do the job just fine.

Move DE into a <span> to the left of your <input>:

<span class="iban">DE</span><input type="text" id="iban" />

Then position the <span> inside the <input>:

span.iban
{
    position: relative;
}

input#iban
{
    margin-left: -25px;
    padding-left: 25px;
}

The above code produces:

Here's a JSFiddle.

edited Apr 25 '13 at 14:24

answered Apr 24 '13 at 07:07

Danny Beckett

20,529
24
107
134

@Downvoter Please explain... – Danny Beckett Apr 24 '13 at 07:10
The user needs to enter only numbers, it isn't? – Arkana Apr 24 '13 at 07:10
@Arkana The main question here is how to keep a default value in a textbox. That is why *your* answer has received 2 downvotes. – Danny Beckett Apr 24 '13 at 07:11
@Arkana The OP has now accepted this answer. Please remove your downvote. – Danny Beckett Apr 24 '13 at 07:13
1

Thats what i want. Thank you. The point with the numbers was not the main point of my question. I know how that works ;) – proud Apr 24 '13 at 07:14
That's the OP opinion, not mine ;) If I need to do something like this and find this question, your answer will doesn't fit to me. Calm down. At last, we're here to *help users*, do not take it as a competition, man. – Arkana Apr 24 '13 at 07:19

Arkana · Answer 3 · 2013-04-24T07:14:12.783

-2

You can try this jQuery:

$(document).ready(function() {
    $("#iban").keydown(function(event) {

            if (event.keyCode < 48 || event.keyCode > 57 || event.keyCode == 46 || event.keyCode == 8) {
                event.preventDefault(); 
            }   

    });
});

I found it here: https://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values/

EDIT: And modify it to prevent backspace and delete keys.

A working fiddle

Hope it helps!

edited Apr 24 '13 at 07:14

answered Apr 24 '13 at 07:02

Arkana

2,831
20
35

This does not answer the question. – Danny Beckett Apr 24 '13 at 07:03
It's Not working in Firefox browser – Ramesh Rajendran Apr 24 '13 at 07:06
1

Sorry, as Danny said, thats not what i searched for – proud Apr 24 '13 at 07:15
1

Just to let you know, deleting this answer will increase your reputation, since it has a negative score. – Danny Beckett Apr 24 '13 at 07:24

Keep default value in textbox on focus

3 Answers3