使用Jquery限制输入文本框

So I need to have an input box in where people only is allowed to enter either the words "Yes" or "No". No other input is allowed. Does anybody out there knows a plugin or any other easy way to that with Jquery? I found a plugin named constraint (http://plugins.jquery.com/project/constrain), that can prevent the user from typing certain characters, but that is not enough, as the plugin can only prevent the user from typing numbers in an alphabetic field, for example. Drop down boxes or other components are not an option.

所以我需要一个输入框,只允许人们输入“是”或“否”字样。不允许其他输入。有没有人知道插件或任何其他简单的方法与Jquery?我找到了一个名为constraint的插件(http://plugins.jquery.com/project/constrain),它可以阻止用户输入某些字符,但这还不够,因为插件只能阻止用户输入数字例如,字母字段。下拉框或其他组件不是一种选择。

Thank you for your help.

感谢您的帮助。

2 个解决方案

#1

Why not something like this (link to jsFiddle)? This will only let you type those characters that are contained in an array of allowed values? I suspect there's a better way to check for the existence of values or partial values in the array instead of looping. But this will be triggered by a user's key press, not when the control loses focus...so the UX may be better.

为什么不这样的东西(链接到jsFiddle)?这只会让你输入允许值数组中包含的那些字符?我怀疑有更好的方法来检查数组中是否存在值或部分值而不是循环。但这将由用户的按键触发,而不是当控件失去焦点时......因此UX可能会更好。

Hope this helps!!

希望这可以帮助!!

HTML

Enter text: <input type="text" id="data" />

JavaScript Code

var allowedValues = ['yes','no'];
$(document).ready(function() {
    $("#data").keyup(function(e) {
        var typedValue = $(this).val(),
            valLength = typedValue.length;
        for(i=0;i<allowedValues.length;i++) {
            if(typedValue.toLowerCase()===allowedValues[i].substr(0,valLength)) {
                return;
            }
        }
        $("#data").empty().val(typedValue.substr(0, valLength-1));
    });
});

#2

Based on clarification in comment, try this:

根据评论中的澄清,试试这个:

Try it out: http://jsfiddle.net/fsPgJ/2/

试一试:http://jsfiddle.net/fsPgJ/2/

EDIT: Added a keypress event to deal with the user holding down a key.

编辑:添加了一个按键事件来处理按住键的用户。

$('input').blur(function() {
    var val = this.value.toLowerCase();
    if(val != "yes" && val != "no") {
        this.value = '';
        alert( "'Yes' or 'No' is required. \n Please try again.");
    }
})
    .keypress(function() {
        var val = this.value.toLowerCase();
        if(val != "yes" && val != "no")
            this.value = '';
    })
    .keyup(function() {
        var val = this.value.toLowerCase();
        if("yes".indexOf(val) != 0 &&
           "no".indexOf(val) != 0) {
               this.value = this.value.substr(0,this.value.length - 1);
           }
    });

---

Original:

If there's some reason you're not using a <select> or :radio or something, then you could have jQuery check the value on a .blur() event.

如果有一些原因你没有使用或:radio或者其他东西,那么你可以让jQuery检查.blur()事件的值。

Try it out: http://jsfiddle.net/fsPgJ/

试一试:http://jsfiddle.net/fsPgJ/

$('input').blur(function() {
    var val = this.value.toLowerCase();
    if(val != "yes" && val != "no") {
        this.value = '';
        alert( "'Yes' or 'No' is required. \n Please try again.");
    }
});

This just clears the input if the (case insensitive) value is not "yes" or "no". I also added an alert() to give the user a little feedback as to why the field was cleared. You may want a different feedback approach.

如果(不区分大小写)值不是“是”或“否”,则只清除输入。我还添加了一个alert()来向用户提供关于字段被清除的原因的一些反馈。您可能需要不同的反馈方法。