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

Question

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

我想要的是:

1. 我将为每个字段固定一个字符，对于T1，它是“X”，对于T2，它是“Y”，对于 T3，它是“Z” 对于 T4，它是“N”
2. 现在

如果我在 T1 中输入 2(可以是 0-9)，结果字段应显示“XX”

如果我在 T2 中输入 3，结果字段应显示“XXYYY”(听说 XX 是先前的字段数据)

如果我在 T3 中输入 1，结果字段应显示“XXYYYZ”和

如果我在 T4 中输入 4，结果字段应显示“XXYYYZNNNN”

同样，最终结果将是“XXYYYZNNNN”

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

Answer 1

这就是我的方法:

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

<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