Question

我有两个面具G999-9和H99-9代表毕业生和荣誉，需要输入单个输入文本html控件。

首次打字时，如果它打到G，我希望它显示研究生格式的格式，而对于Honors，我希望它在输入时显示Honors格式的格式。有没有一种简单的方法在javascript或jQuery中执行此操作？

示例：

G111-1
H91-5
G001-3
G___-_  (If you hit G it should show the Graduate format)
H__-_   (If you hit H it should show the Honors format.)
____-_  (Type anything else, or nothing do this.)

谢谢，马克

Answer 1

<强> Regex Based Demo

耶！正则表达式！是的，就像所有其他（非HTML）解析问题一样，这是一个正则表达式。：）

$("input").keyup(function(e){
    if(e.keyCode > 40 || e.keyCode < 37)
    {
        var validInput = $(this).val().match(/(([G])(([0-9]{3}[-]([0-9]{0,1})?|[0-9]{0,3})?)?|([H])(([0-9]{2}[-]([0-9]{0,1})?|[0-9]{0,2})?)?)/);
        $(this).val(validInput?validInput[0]:"")
    }
});

这有点令人费解（非常感谢帮助优化它），但它确实有效。

Answer 2

简单的方法？你要么必须走绳子，要么使用一些花哨的正则表达式。

通常情况下，我们会使用正则表达式，但假设您对正则表达式知之甚少（可能是一个不好的假设，但大多数可以阅读它们的人会首先倾向于它们）并且希望为了让你了解正在发生的事情，我在程序上写了更多：

<input type="text" class="formatted" />

$(document).ready(function(){
    function applyMask(instr){
        var pOut = [],  delimitter = '-', format = 0, pSplit = 4, pMax = 6;
        // There are a lot of ways to express this.  I just chose one that should
        // be understandable.
        if ((instr.length > 0) && (instr[0].toUpperCase() == 'H'))
        {
            pSplit = 3;
            pMax = 5;
        } 
        pMax = Math.min(pMax, instr.length);

        for (var i=0; i < pMax; i++)
        {
            if ((i==pSplit) && (instr[i] != delimitter))
            {
                pOut.push(delimitter);
            }
            else
            {
                pOut.push(instr[i]);
            }
        }
        return pOut.join('');
    }

    $('.formatted').keyup(function(){
        $(this).val(applyMask($(this).val()).toUpperCase());
    });
});

这是一个小提琴，甚至：http://jsfiddle.net/UdcND/

Answer 3

有一些jQuery插件可以轻松地将文本输入转换为掩码编辑：

一个简单但实用的插件： http://www.pengoworks.com/workshop/js/mask/
另一个不错的选择： http://digitalbush.com/projects/masked-input-plugin/

屏蔽编辑单个输入文本框的两种代码格式

3 个答案: