how to add fixed country dialing code in input box

Question

I want to add a fixed country(UK) code and its not changeable in input box like below image:

And the value +44 is fixed with the other 11 digits. How to add this in input elements.

N.B: +44 also added with other values after submitting the form.

Does this answer your question? [Do you know any opensource JQuery dropdown menu for telephone prefix?](https://stackoverflow.com/questions/11204479/do-you-know-any-opensource-jquery-dropdown-menu-for-telephone-prefix) — Sfili_81, Dec 10 '19 at 12:44

Akash Shrivastava · Accepted Answer · 2019-12-11T06:26:28.293

2

You'll need to add another element that'll work as a prefix for this input.

#input-wrapper * {
  position: absolute;
}

#input-wrapper label {
  z-index: 99;
  line-height: 25px;
  padding: 2px;
  margin-left: 5px;
}

#input-wrapper input {
  height: 25px;
  text-indent: 35px;
}

<div id="input-wrapper">
  <label for="number">+44</label>
  <input id='number' onchange="this.value = '+44' + this.value" type="text">
</div>

If you want the +44 to be added without showing up in HTML, you can add an event in JS file.

document.getElementById("number").addEventListener('change', function(e){
    e.target.value = '+44' + e.target.value;
});

edited Dec 11 '19 at 06:26

answered Dec 10 '19 at 12:45

Akash Shrivastava

1,365
8
16

2

But this +44 will added with input value after submitting form – Shawn Dec 11 '19 at 02:52
1

for That you can use a `JavaScript` function, see the `onchange` event on `input` in updated snippet above. – Akash Shrivastava Dec 11 '19 at 05:50
i think if its updated with hiddenly then good. btw thanks @Akash. – Shawn Dec 11 '19 at 07:12

score 1 · Answer 2 · answered Dec 10 '19 at 12:44

You can position the text on top of the input field to make it look as if it is inside it. Something like this:

<input type="text" name="phone" style="width:3.5em;padding-left:1.5em;font:inherit"><span style="margin-left:-3em;margin-right:10em;">+44</span>

how to add fixed country dialing code in input box

2 Answers2