0

我需要根据国家/地区为表单输入添加前缀，并防止该前缀被编辑。就设置而言，我让它正常工作，但是当我切换国家/地区时，块（只读）没有清除。输入清除但前三列仍然是只读的。我在这里搜索了线程，他们大多都说使用 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 代码。

您需要两个功能 - 一个用于select更改时，一个用于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 回答