如何将字段数据从一种格式更改为另一种格式

时间:2013-08-13 05:15:47

标签: javascript jquery jquery-plugins

在我的表格中,我有四个字段。所有字段都可以自由接受数字,并且这些数字被转换为预定义的字符格式(我用错误的逻辑实现了一半,但在结果字段中,它没有将所有字段数据组合成某种格式。假设如果在每个字段中键入数字2,则结果字段应该是这样的:'XXYYZZNN'),

我想要的是:

  1. 我将为每个字段修复一个字符,对于T1它是'X',对于T2它是'Y', 对于T3来说,T4的'Z'是'N'
  2. 现在
  3. 如果我在T1中输入2(可以是0-9),结果字段应显示“XX”

    如果我在T2中输入3,结果字段应显示'XXYYY'(听到XX是以前的字段数据)

    如果我在T3中输入1,结果字段应显示'XXYYYZ'和

    如果我在T4中输入4,结果字段应显示'XXYYYZNNNN'

    明智的最终结果将是'XXYYYZNNNN'

    我该怎么做?任何帮助将不胜感激。谢谢。

2 个答案:

答案 0 :(得分:0)

这将是我的方法:

使用数据属性定义每个输入的字符(也使用适当的标签标签和输入的类型属性)

<div>
    <label for="textBox1">T1 :</label>
    <input type="text" id="textBox1" data-char="X"></input>
    <br/>
    <label for="textBox2">T2 :</label>
    <input type="text" id="textBox2" data-char="Y"></input>
    <br/>
    <label for="textBox3">T3 :</label>
    <input type="text" id="textBox2" data-char="Z"></input>
    <br/>
    <label for="textBox4">T4 :</label>
    <input type="text" id="textBox3" data-char="N"></input>
    <br/>
    <label for="message">Result :</label>
    <input type="text" id="message"></input>
</div>

然后我将浏览每个keyup事件的所有文本框,将它们的值解析为数字并将相应的字符附加到结果

$(document).ready(function () {
    $('[id^="textBox"]').keyup(function(){
        var result = '';
        $('[id^="textBox"]').each(function(){
            var count = parseInt($(this).val(),10) || 0;
            result += Array(count+1).join($(this).data('char')); 
        });
        $('#message').val(result);
    });
});

<强> Working fiddle

答案 1 :(得分:0)

DEMO

$(document).ready(function () {
    function another_format(len,char_code){
        var ret='';
        for(var i=0;i<len;i++){
            ret +=char_code;
        }
        return $.trim(ret);
    }
    $("#textBox,#textBox1,#textBox2,#textBox3").keyup(function (event) {
        console.log(event.keyCode);
        if (event.keyCode >=49  && event.keyCode <= 57 && event.keyCode == 8 && event.keyCode=46) {
            var x = another_format($('#textBox').val(),'X');
            var y = another_format($('#textBox1').val(),'Y');
            var z = another_format($('#textBox2').val(),'Z');
            var n = another_format($('#textBox3').val(),'N');
            $('#message').val(x+y+z+n);
        }
    });
});