如何在输入框中添加固定国家/地区拨号代码[重复]答案

【问题标题】：how to add fixed country dialing code in input box [duplicate]如何在输入框中添加固定国家/地区拨号代码[重复]
【发布时间】：2020-04-03 15:38:46
【问题描述】：

我想在输入框中添加一个固定的国家（英国）代码，如下图所示：

而+44 的值与其他 11 位数字是固定的。如何在输入元素中添加它。

注意：+44 在提交表单后还添加了其他值。

【问题讨论】：

你试过了吗？请向我们展示您的代码。
这能回答你的问题吗？ Do you know any opensource JQuery dropdown menu for telephone prefix?

标签： html css input

【解决方案1】：

您可以将文本放置在输入字段的顶部，使其看起来好像在其中。像这样的：

<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>

【讨论】：

【解决方案2】：

您需要添加另一个元素作为此输入的前缀。

#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>

如果您希望添加+44 而不显示在 HTML 中，您可以在 JS 文件中添加一个事件。

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

【讨论】：

但是这个+44会在提交表单后加上输入值
对于您可以使用JavaScript 函数，请参阅上面更新的sn-p 中input 上的onchange 事件。
我认为如果它隐藏更新然后很好。顺便说一句，谢谢@Akash。