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

Question

我有一个包含国家列表的下拉菜单。当用户从下拉列表中选择一个国家/地区时，将触发 change 事件，我使用 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(取决于国家/地区)。我想阻止他们这样做。

任何想法将不胜感激。

这是我的 JSFIddle:

https://jsfiddle.net/javacadabra/6dj7hmvu/

Answer 1

一种方式是监听keydown事件，判断当前焦点位置是否覆盖固定区域，防止按下的键改变固定区域。

window.onload = function() {


  var length  =  length = $("input[name='phone-name']").val().length;
//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;
        }
        length = $("input[name='phone-name']").val().length;
    });
    
    //When focus on phone Number you cant edit the area code
    //$("input[name='phone-name']").focus(function(){
        //alert('edit phone');
    //});
  
    // Direct keys that is allowed
    var directs =  [
        3, //'Home',
        35, //'End'
        37, //'left'
        39 //right
    ]
    $("input[name='phone-name']").on('keydown', function(e){
        var selectionStart = this.selectionStart;  // The start position of current cursor's select/focus range.
        if (directs.indexOf(e.keyCode) >= 0) {
          // You may want to add other rules like ctrl+c to allow, 
        } else if (selectionStart < length) { // No action except moving is allow at danger area.
            e.preventDefault();
            return false;
        } else if (selectionStart === length &&
                   e.keyCode === 8) {  // Backspace is not allow at length, as it remove char
            e.preventDefault();
            return false;
        }
    });
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>