Question

我正在尝试创建一个函数来限制<input>接受的格式，当格式满足时，其旁边的<div>将被隐藏。（格式为I-xxxx-xxxx，而前两个字符为 I 和-，第七个字符为另一个-）

这是我的<input>和<div>

的细分

这是我用来检查<input>的函数，如果出现以下情况，它将隐藏<div> 格式满意。

var referenceChecker = document.getElementById("reference_number").value;
var iChecker = referenceChecker.charAt(0);
var firstDashChecker = referenceChecker.charAt(1);
var lastDashChecker = referenceChecker.charAt(6);

function checkIfEmptyReferenceNumber(that) {
  if (that.value == "") {
    document.getElementById("ifEmptyReferenceNumberMessage").style.display = "block";
  } else {
    if (iChecker = "I" && firstDashChecker = "-" && lastDashChecker = "-") {
      document.getElementById("ifEmptyReferenceNumberMessage").style.display = "none";
    }
  }

<input id="reference_number" onchange="checkIfEmptyReferenceNumber(this)"
 class="form-control" maxlength="11" type="text" ng-required="true" 
 ng-model="reference_number" onkeyup="this.value = this.value.replace(/[^I0-9-]/g, '')" />

<div id="ifEmptyReferenceNumberMessage" style="display: block;"><span style="color: red;">Reference Number Needed!</span></div>

我道歉，但我无法弄清楚哪里错了。

Answer 1

另一种方法呢？不检查而是执行模式：

var input = document.querySelector("input");

input.onchange = input.oninput = input.onfocus = input.onkeydown = function(e){
  let digits = input.value.replace(/\D/g, "");
  if(e && e.type === "keydown" && e.key === "Backspace"){
    digits = digits.substr(0, digits.length-1);
  }
  let text = "I-" + digits.slice(0, 4).padEnd(4, "x") + "-" + digits.slice(4, 8).padEnd(4, "x");
  input.value = text;
  input.setSelectionRange(text.indexOf("x"), text.length);  
}

input.onchange();

input:invalid {
  background: #FDD;
}

input:valid {
  background: #8F8;
}

<input type="text" pattern="I-\d{4}-\d{4}"/>

为什么我的charAt函数不能按我的预期工作？

1 个答案: