为单个输入文本框编辑两种代码格式

Masked Edit two code formats for a single input text box

本文关键字：两种 代码 格式 编辑 单个 输入 文本      更新时间：2023-09-26

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

当第一次输入时，如果它碰到G，我希望它显示研究生格式的格式，对于荣誉，我希望它在输入时显示荣誉格式的格式。有一个简单的方法来做到这一点在javascript或jQuery?

例子:

<>之前G111-1H91-5G001-3G___-_(如果你点击G，它应该显示毕业格式)H__-_(如果你点击H，它会显示荣誉格式。)____-_(输入任何其他内容，或者不执行此操作。)之前

谢谢,Marc

基于正则表达式演示

耶!正则表达式!是的，就像所有其他(非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]:"")
    }
});

这是有点复杂(帮助优化它将非常感激)，但它工作。

方法简单吗?你要么遍历字符串，要么使用一些奇特的正则表达式。

通常，我们会使用正则表达式来实现这一点，但假设您不太了解正则表达式(可能是一个糟糕的假设，但大多数可以阅读它们的人都会首先被它们所吸引)，并且希望让您了解正在发生的事情，我将其写得更程序化:

<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/

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

  • 一个简单但有用的插件: http://www.pengoworks.com/workshop/js/mask/

  • 另一个不错的选择: http://digitalbush.com/projects/masked-input-plugin/

相关文章：