Question

您好！

我正在编写一个新的HTML表单，它将收集更多项目的州缩写（即“ks”）。现在我有-input字段限制所以它只允许2个字符。这并不能阻止访问者像“SS”一样随机进入该领域。

我想要一个代码，允许我将该字段中的内容限制为仅限美国的官方州缩写。

到目前为止，我在我的网站上使用HTML，CSS和Javascript。感谢您的所有帮助和想法！

Answer 1

您可以使用<select> html元素。

<select>
  <option value="MA">MA<option>
  ....
</select>

Answer 2

更新。添加了所有状态，大写处理和jsfiddle链接。

这是一个纯粹的javascript实现，应该让你知道你需要做什么：

<script>
    function validateState(el) {
    //put all states in this array. 
    var states =    ["AK","AL","AR","AS","AZ","CA","CO","CT","DC","DE",
"FL","GA","GU","HI","IA",
"ID","IL","IN","KS","KY","LA","MA","MD","ME","MH","MI","MN","MO","MS","MT",
"NC","ND","NE","NH","NJ","NM","NV","NY","OH","OK","OR","PA","PR","PW","RI",
"SC","SD","TN","TX","UT","VA","VI","VT","WA","WI","WV","WY"];
    for(var i=0;i< states.length;i++) {
      if(el.value.toUpperCase() == states[i]) {
        return true;
      }
    }
    //clear element if it doesn't match a state
    el.value = ""; //you could maybe do something else here.
    return false;
}
</script>
<input class="up" type="text" maxlength="2" onchange="validateState(this);"/>

看到它在这里工作：http://jsfiddle.net/k7QQs/

Answer 3

我认为this会有所帮助。

它有：

mustMatch:true,

Answer 4

您可以在没有脚本的情况下执行此操作：

<select name="state">
<option value="" selected>Please Select</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AS">American Samoa</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorada</option>
<option value="CT">Conneticut</option>
<option value="DC">District of Colombia</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="FM">Federated States</option>
<option value="GA">Georgia</option>
<option value="GU">Guam</option>
<option value="HI">Hawaii</option>
<option value="IA">Iowa</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MA">Massachusetts</option>
<option value="MD">Maryland</option>
<option value="ME">Maine</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MO">Missouri</option>
<option value="MS">Mississippi</option>
<option value="MT">Montana</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="NE">Nebraska</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NV">Nevada</option>
<option value="NY">New York</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VI">Virgin Islands</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WI">Wisconsin</option>
<option value="WV">West Virginia</option>
<option value="WY">Wyoming</option>    
</select>

这种方法对用户来说比预期他们知道State缩写更容易。

或者 -

function validState(state){
    return state.toUpperCase() in{
        AL:1, AK:1, AZ:1,
        AR:1, CA:1, CO:1, CT:1,
        DE:1, DC:1, FL:1, GA:1,
        HI:1, ID:1, IL:1, IN:1, IA:1,
        KS:1, KY:1, LA:1, ME:1, MD:1,
        MA:1, MI:1,
        MN:1, MS:1, MO:1, MT:1, NE:1,
        NV:1, NH:1, NJ:1, NM:1,
        NY:1, NC:1, ND:1,
        OH:1, OK:1, OR:1, PA:1,
        RI:1, SC:1, SD:1, TN:1, TX:1,
        UT:1, VT:1, VA:1, WA:1,
        WV:1, WI:1, WY:1
    }
}

将html输入框中的字符串限制为仅缩写

4 个答案: