Question

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.

Thank you for your help.

Answer 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.

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));
    });
});