Question

是否存在用于将用户输入限制为数组内值的JS方法（或CSS）？我的目标是创建一个使用Giphy API（和Ajax调用）显示gif国家的应用。

我已经完成了代码。但是，我要添加的最后一个功能是将用户输入限制为仅国家/地区名称。

该应用程序当前允许进行任何输入，并搜索Giphy库中的所有gif。这本身就是一个很酷的功能，但是该应用程序的重点是成为与地理相关的应用程序，而不是Giphy衍生产品。

Answer 1

您可以对输入执行onblur事件，并检查数组是否包含您的输入值。如果不是，请清除输入，然后添加Error css类以向用户通知其输入无效（红色边框，红色框，警报事件等）

Answer 2

通过“限制”，我希望用户在搜索“ 不代表实际国家/地区的字词。我都有数组中的国家/地区名称。

在这种情况下，您确实不需要限制（以防止输入），而需要验证（以检查输入），这可以通过change的{{1}}事件来完成，当字段失去焦点并且输入中的值已被修改时触发。从那里开始，您只需使用indexOf()数组方法来检查数组中输入的值。如果找到，则返回值为> = 0，否则，返回值为-1。

这是一个例子：

input

let values = ["red", "green", "blue", "yellow", "orange", "teal"];

let input = document.querySelector("input");

// Set up a change event callback for the input
input.addEventListener("change", validate);

function validate(){
  // Check the lower case version of the input against the lower case values in the array
  if(values.indexOf(input.value.toLowerCase()) === -1){
    alert(input.value + " is invalid!");
    input.classList.add("invalid");  // Attachh the invalid class
  } else {
    input.classList.remove("invalid");  // Remove the invalid class
  }
}

.invalid { border:1px solid red; }

Answer 3

您不能直接限制输入，因为您不知道用户将键入什么。而是监听onkeyup或onblur事件，然后可以检查输入值是否为国家/地区。如果不是，则以某种方式提醒用户。

提示：如果无效，请不要清除输入内容，因为用户可能不得不一次又一次地输入长的国家名称而感到沮丧。

注意：该数组可能不包含所有国家/地区；为了方便起见，我只是从github复制并粘贴了

对于第一个解决方案，我将监听oninput事件，然后检查输入值是否为国家/地区。否则，输入的边框将变为红色，并且会出现一些帮助文本，直到用户输入国家/地区名称为止。如果输入的是国家/地区名称，则边框将变为绿色。

var countrys = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua &amp; Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas"
	,"Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia &amp; Herzegovina","Botswana","Brazil","British Virgin Islands"
	,"Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica"
	,"Cote D Ivoire","Croatia","Cruise Ship","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea"
	,"Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana"
	,"Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India"
	,"Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kuwait","Kyrgyz Republic","Laos","Latvia"
	,"Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Mauritania"
	,"Mauritius","Mexico","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Namibia","Nepal","Netherlands","Netherlands Antilles","New Caledonia"
	,"New Zealand","Nicaragua","Niger","Nigeria","Norway","Oman","Pakistan","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal"
	,"Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre &amp; Miquelon","Samoa","San Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles"
	,"Sierra Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts &amp; Nevis","St Lucia","St Vincent","St. Lucia","Sudan"
	,"Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad &amp; Tobago","Tunisia"
	,"Turkey","Turkmenistan","Turks &amp; Caicos","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States","United States Minor Outlying Islands","Uruguay"
	,"Uzbekistan","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
var input = document.getElementById("country");
var helperText = document.getElementById("country-helper-text");

input.addEventListener('input', validate);

function validate(e) {
  if (countrys.includes(input.value)) {
    input.style.borderColor = "green";
    helperText.style.display = "none";
  } else { 
    input.style.borderColor = "red";
    helperText.style.display = "block";
  }
}

* {
  font-family: Arial
}

*:focus {
  outline: none
}

#country {
  padding:  3px;
  font-size: 20px;
  border: 2px solid black
}

#country-helper-text {
  color: red;
  position: relative;
  left: 60px;
  top: -15px;
  font-size: 14px;
  display: none;
}

<label>
  Country <input id="country" placeholder="Canada" type="text">
  <p id="country-helper-text">Invalid Country!</p>
</label>

我不会显示的第二个解决方案，因为与所有国家/地区进行正则表达式需要花费一些时间。但是它使用pattern元素的input属性来验证输入的内容。然后，您可以使用:valid和:invalid css选择器来设置输入的样式并显示/隐藏帮助程序文本。

将用户输入限制为数组内的值

3 个答案: