0

国に基づいてフォーム入力にプレフィックスを追加し、そのプレフィックスが編集されないようにする必要があります。設定に関する限り正しく機能していますが、国を切り替えるとブロック（読み取り専用）がクリアされません。入力はクリアされますが、最初の 3 つの列はまだ読み取り専用です。ここでスレッドを検索しましたが、ほとんどすべて attr("readonly", false) ステートメントを使用するように言われていますが、何らかの理由で機能していません。誰かが問題を指摘してくれませんか? 

<div>
 <label for="inputCountry">Country</label>
 <div>
   <select name="country" id="inputCountry" onchange="SetPhonePrefix();">
    <option value="" selected="selected">Please Select</option>
    <option value="84">Greece</option>
   </select>
 </div>
</div>

<script>
function SetPhonePrefix() {
  var ctrl = document.getElementById("inputCountry");
  var country = ctrl.options[ctrl.selectedIndex].text;
  var doLock = false;

  if (country == 'Greece') {
    document.getElementById('inputFax').value = '+30';
    doLock = true;
  } else {
    document.getElementById('inputFax').value = '';  
    $("#inputFax").attr("readonly", false);    
  } 

  if (doLock) {
     var readOnlyLength = $('#inputFax').val().length;
     $('#inputFax').on('keypress, keydown', function(event) {
       if ((event.which != 37 && (event.which != 39))
           && ((this.selectionStart < readOnlyLength)
           || ((this.selectionStart == readOnlyLength) && (event.which == 8)))) {
           return false;
       }
     });  
  } 
} 
</script>
4

1 に答える 1

0

必要ありませんreadonly。これは、ユーザーにフィールドに何も入力させたくない場合に使用します。あなたの場合、入力の開始のみを制限したい。

クラスとデータ属性を使用すると、JavaScript コードを繰り返さずに複数のページでコードを再利用できます。

2 つの関数が必要です。1 つselectは が変更されたとき、もう 1 つは が変更されたときinputです。使用$(document).on()すると、静的入力と動的入力の両方を監視します。また、'input'コピーと貼り付けを含む、入力に対するすべての変更を監視するために使用します。

$(document).on('change', '.prefix-select', function(){
  var prefix = $(this).find(':selected').data('prefix');
  $(this).closest('form').find('.prefix-input').data('prefix', prefix).val(prefix);
});
$(document).on('input', '.prefix-input', function(){
  var prefix = $(this).data('prefix');
  if($(this).val().lastIndexOf(prefix, 0) !== 0){
    $(this).val(prefix);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select class="prefix-select">
    <option data-prefix="">Please Select</option>
    <option value="84" data-prefix="+30">Greece</option>
  </select>
  <div>
    Phone
    <input type="tel" name="phone" class="prefix-input">
  </div>
  <div>
    Fax
    <input type="tel" name="fax" class="prefix-input">
  </div>
</form>

JSFiddle の例

于 2016-04-06T19:06:12.987 に答える