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>

Answer 2

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

CSS

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

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

<强> HTML

 <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;
        }
    });

工作小提琴：http://jsfiddle.net/8086p69z/4/

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

2 个答案: