javascript - 有没有一种方法可以使用 jQuery 自动完成与另一个字段相关的字段？

Question

template.html

<div class="form-group col-sm-12 col-md-12">
    <label for="id_amount_in_figure">Amount in figure:</label>
    <input type="number" name="amount_in_figure" id="id_amount_in_figure">
</div>
<div class="form-group col-sm-12 col-md-12">
    <label for="id_amount_in_word">Amount in word:</label>
    <input type="text" name="amount_in_word" id="id_amount_in_word">
</div>

这是我使用 python 将数字转换为单词的代码。

def figures_to_words(figure):
    # ... suppressed for brevity
        return ' '.join(words)
    return words

有没有一种方法，只要有人在 Amount in Figure 字段中输入数字并按下 Tab 按钮，然后按下下面的字段，即 < em>amount in word 应该是自动填的吧？

Answer 1

这可以使用 jquery 来实现。这是一个 jquery 函数。这个函数将

template.html

<div class="form-group col-sm-12 col-md-12">
    <label for="id_amount_in_figure">Amount in figure:</label>
    <input type="number" onkeyup="word.innerHTML=convertNumberToWords(this.value)" 
        name="amount_in_figure" id="id_amount_in_figure">
</div>
<div class="form-group col-sm-12 col-md-12">
    <label for="id_amount_in_word">Amount in word:</label>
    <input type="text" name="amount_in_word" id="id_amount_in_word">
</div>
<script type="text/javascript">
    function convertNumberToWords(amount) {
        var words = new Array();
        words[0] = '';
        words[1] = 'One';
        words[2] = 'Two';
        words[3] = 'Three';
        words[4] = 'Four';
        words[5] = 'Five';
        words[6] = 'Six';
        words[7] = 'Seven';
        words[8] = 'Eight';
        words[9] = 'Nine';
        words[10] = 'Ten';
        words[11] = 'Eleven';
        words[12] = 'Twelve';
        words[13] = 'Thirteen';
        words[14] = 'Fourteen';
        words[15] = 'Fifteen';
        words[16] = 'Sixteen';
        words[17] = 'Seventeen';
        words[18] = 'Eighteen';
        words[19] = 'Nineteen';
        words[20] = 'Twenty';
        words[30] = 'Thirty';
        words[40] = 'Forty';
        words[50] = 'Fifty';
        words[60] = 'Sixty';
        words[70] = 'Seventy';
        words[80] = 'Eighty';
        words[90] = 'Ninety';
        amount = amount.toString();
        var atemp = amount.split(".");
        var number = atemp[0].split(",").join("");
        var n_length = number.length;
        var words_string = "";
        if (n_length <= 9) {
            var n_array = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0);
            var received_n_array = new Array();
            for (var i = 0; i < n_length; i++) {
                received_n_array[i] = number.substr(i, 1);
            }
            for (var i = 9 - n_length, j = 0; i < 9; i++ , j++) {
                n_array[i] = received_n_array[j];
            }
            for (var i = 0, j = 1; i < 9; i++ , j++) {
                if (i == 0 || i == 2 || i == 4 || i == 7) {
                    if (n_array[i] == 1) {
                        n_array[j] = 10 + parseInt(n_array[j]);
                        n_array[i] = 0;
                    }
                }
            }
            value = "";
            for (var i = 0; i < 9; i++) {
                if (i == 0 || i == 2 || i == 4 || i == 7) {
                    value = n_array[i] * 10;
                } else {
                    value = n_array[i];
                }
                if (value != 0) {
                    words_string += words[value] + " ";
                }
                if ((i == 1 && value != 0) || (i == 0 && value != 0 && n_array[i + 1] == 0)) {
                    words_string += "Crore ";
                }
                if ((i == 3 && value != 0) || (i == 2 && value != 0 && n_array[i + 1] == 0)) {
                    words_string += "Lakh ";
                }
                if ((i == 5 && value != 0) || (i == 4 && value != 0 && n_array[i + 1] == 0)) {
                    words_string += "Thousand ";
                }
                if (i == 6 && value != 0 && (n_array[i + 1] != 0 && n_array[i + 2] != 0)) {
                    words_string += "Hundred ";
                } else if (i == 6 && value != 0) {
                    words_string += "Hundred ";
                }
            }
            words_string += " only"
            words_string = words_string.split("  ").join(" ");
        }
        $( "#id_amount_in_word" ).val( words_string );
    }
</script>