Javascript 使输入字段的一部分不可编辑

我有一个国家的下拉列表。当用户从下拉列表中选择一个国家时，会触发一个更改事件，我使用switch语句来检测所选的值，并将该国家的区号添加到另一个输入框中，以便用户输入其电话号码

问题是我想不出一个办法使区号不可编辑。理想情况下，当用户关注电话输入时，他们不能删除区号

以下是迄今为止我的代码示例：

//Detect the selected option in dropdown (UK By default)
    $("select[name='country-name']").change(function () {
        var country = $(this).val();
        switch (country) {
            case 'United Kingdom':
                $("input[name='phone-name']").val('+44');
                break;
            case 'Ireland':
                $("input[name='phone-name']").val('+353');
                break;
            case 'France':
                $("input[name='phone-name']").val('+33');
                break;
            case 'Spain':
                $("input[name='phone-name']").val('+34');
                break;
        }
    });

    //When focus on phone Number you cant edit the area code
    $("input[name='phone-name']").focus(function(){
        alert('edit phone');
    });

和我的HTML：

<div class="form-group">
    <div class="col-md-6">
        <label class="control-label">Country</label>
        <span>
            <select name="country-name">
                <option value="United Kingdom">United Kingdom</option>
                <option value="Ireland">Ireland</option>
                <option value="France">France</option>
                <option value="Spain">Spain</option>
                <option value="Other">Other</option>
            </select>
        </span>
    </div>
    <div class="col-md-6">
        <label class="control-label">Phone</label>
        <div>
            <span>
            <input type="text" name="phone-name" value="+44" size="40" maxlength="80" minlength="7"></span><i class="fa fa-times hide"></i><i class="fa fa-check hide"></i>
        </div>
    </div>
</div>

目前，该代码工作正常，并将区号输入电话输入框。但是，用户可以将注意力集中在电话输入框上，并根据国家/地区删除+xxx或+xx，如果他们愿意的话。我想阻止他们这样做

任何想法都将不胜感激

这是我的JSFIDLE：

---

您可以创建类似以下内容的假输入：

CSS

<style>
    .fakeInput{
        background-color:#FFFFFF;
        border:1px solid #CCCCCC;
        border-radius:5px;
        padding:3px;
        width:300px;
    }

    .fakeInput span{
        margin-left:10px;
    }
</style>

工作小提琴：

一种方法是收听按键事件，并确定当前焦点d位置是否与固定区域重叠，如果按下按键将改变固定区域，则防止其发生

window.onload=函数{ var length=length=$input[name='phone-name'].val.length； //默认情况下，在下拉列表中检测所选选项 $select[name='country-name']。changefunction{ var country=$this.val； 交换国家{ “联合王国”案： $input[name='phone-name'].val'+44'； 打破 “爱尔兰”案： $input[name='phone-name'].val'+353'； 打破 “法国”案： $input[name='phone-name'].val'+33'； 打破 “西班牙”案： $input[name='phone-name'].val'+34'； 打破 } 长度=$input[name='phone-name'].val.length； }; //当关注电话号码时，您无法编辑区号 //$input[name='phone-name'].focusfunction{ //警告“编辑电话”； //}; //允许的直接键 var=[ 3、/“家”， 35，/“结束” 37、/“左” 39//对 ] $input[name='phone-name']。在'keydown'上，函数E{ var selectionStart=this.selectionStart；//当前光标的选择/焦点范围的开始位置。 如果directs.indexOfe.keyCode>=0{ //您可能需要添加其他规则，如ctrl+c，以允许， }否则，如果选择Start一种方便的方法是将不希望用户编辑的部分分离到另一个输入。并且使输入为只读。是的，我在想，如果我不能用上面的方法完成，我会求助于它，只是理想的情况下，我想把它保持在同一个输入字段中。不得不说，这看起来很有希望！我会试一试，下个小时再打给你@fuyushimoya。为什么你认为使用按键是一个丑陋的解决方案？是从性能的角度还是从性能的角度？谢谢你的回答。哦，我以后可能会删除它，因为我首先认为它不能阻止用户进入危险区域并使用ctrl+c，似乎我错了，但是，因为你可能希望用户复制，为了完成整个输入，你需要添加像箭头键和ctrl+c这样的传递规则，我有时懒得不去考虑所有的可能性：P.另一个原因是我记得我回答了一些问题，因为它有实验标签，但是我意识到这个问题将是安全的，因为我们使用的是在APT上没有EXP标签，所以它可以。谢谢你的帮助，我已经接受了答案。我想我会在它的基础上努力使它更符合我的需要，但这是它的100%基础：

 <p class="fakeInput">+44<span class="contentedit" contentEditable="true" onfocus="this.innerHTML=''"></span></p>

//Detect the selected option in dropdown (UK By default)
    $("select[name='country-name']").change(function () {
        var country = $(this).val();
        switch (country) {
            case 'United Kingdom':
                $(".fakeInput").html('+44');
                break;
            case 'Ireland':
                $(".fakeInput").html('+353');
                break;
            case 'France':
                $(".fakeInput").html('+33');
                break;
            case 'Spain':
                $(".fakeInput").html('+34');
                break;
        }
    });