Сделать поле ввода неизменным

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 события, и решает, является ли текущим Focuse d положение перекрывает неподвижную область, предотвратить его, если нажата клавиша изменяет фиксированную область ,

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> 

Script

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