无法删除的输入 function (HTML) 中的默认值

Question

So I'm trying to create a form where user will enter their phone number. Since it's supposed to be used in single country, I want country code as a default value that can't be erased, only added to. How that could be done, or maybe there are alternative best practices for such case?

 <form class="form__wrapper"> <h2 class="form__wrapper_text">Just form</h2> <div class="form__wrapper_number"> <p>Your number:</p> <!--<span>+380</span>--> <input type="tel" value="+380" o> </div> </form>

Answer 1

You can make sure it does not get deleted by key-up event. Code also checks for cut and selected then delete...

 document.querySelector('input').addEventListener('keyup', val, false); function val() { if (this.value.includes("+380 ") === false) { this.value = "+380 " + this.value.substr(this.value.indexOf(' ') + 1); this.value = this.value.replace("+380 +380", "+380 "); } }

 <form class="form__wrapper"> <h2 class="form__wrapper_text">Just form</h2> <div class="form__wrapper_number"> <p>Your number:</p> <!--<span>+380</span>--> <input type="tel" value="+380" o> </div> </form>

But I have to say, this kind of things a better done simply like: type +380 <input here> then on submit just join value of +380 to input submitted value...

And CSS only solution:

 input { padding-left: 40px; }.input-container { position: relative; }.input-container:after { content: '+380 '; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); }

 <form class="form__wrapper"> <h2 class="form__wrapper_text">Just form</h2> <div class="form__wrapper_number"> <p>Your number:</p> <div class="input-container"> <input type="tel"> </div> </div> </form>