在jQuery中模拟实时类型

时间:2012-09-18 20:46:41

标签: javascript jquery javascript-events

我正在尝试编写一个脚本,将输入的当前值(int)转换为单词。

var th = ['', 'thousand', 'million', 'billion', 'trillion'];
var dg = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
var tn = ['ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen'];
var tw = ['twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety'];

function toWords(s) {
    s = s.toString();
    s = s.replace(/[\, ]/g, '');
    if (s != parseFloat(s)) return 'You must enter a number';
    var x = s.indexOf('.');
    if (x == -1) x = s.length;
    if (x > 15) return 'too big';
    var n = s.split('');
    var str = '';
    var sk = 0;
    for (var i = 0; i < x; i++) {
        if ((x - i) % 3 == 2) {
            if (n[i] == '1') {
                str += tn[Number(n[i + 1])] + ' ';
                i++;
                sk = 1;
            }
            else if (n[i] != 0) {
                str += tw[n[i] - 2] + ' ';
                sk = 1;
            }
        }
        else if (n[i] != 0) {
            str += dg[n[i]] + ' ';
            if ((x - i) % 3 == 0) str += 'hundred ';
            sk = 1;
        }
        if ((x - i) % 3 == 1) {
            if (sk) str += th[(x - i - 1) / 3] + ' ';
            sk = 0;
        }
    }
    if (x != s.length) {
        var y = s.length;
        str += 'point ';
        for (var i = x + 1; i < y; i++) str += dg[n[i]] + ' ';
    }
    return str.replace(/\s+/g, ' ');
    return false;
}


var input = $('#numbers'),
    label = $('.words'),
    converted = toWords(input.val());

input.bind('keyup keydown', function() {
    converted = toWords(this.value)
    setTimeout(function() {
        label.empty().text(converted);
    }, 1000);
});​

此时,无论我输入什么内容,我都可以生活,但是一旦我通过toWords函数发送它,它就会获取页面加载时给出的输入值。

换句话说,它不会使用我输入的新数字更新输入字段的值,然后应该将其转换为单词。

有什么想法吗? - http://jsfiddle.net/qTBxv/211/

4 个答案:

答案 0 :(得分:4)

您必须使用输入的新值更新转换后的变量。

$(document).ready(function(){
    input.bind('keyup', function() {
        setTimeout(function() {
            converted = toWords(input.val());
            label.append(converted);
    }, 500);
    });
});

演示:http://jsfiddle.net/qTBxv/214/

答案 1 :(得分:3)

添加对toWords的调用,同时在附加事件中传递当前输入值。

input.bind('keyup keydown', function() {
    converted = toWords(this.value)
    setTimeout(function() {
        label.empty().text(converted);
    }, 1000);
});​

DEMO

答案 2 :(得分:2)

每次值发生变化时,您都需要确保更新converted(在这种情况下,您将进入关键事件,因此您可以在那里进行更新)。像这样:

var input = $('#numbers'),
    label = $('.words'),
    converted;

input.bind('keyup keydown', function() {
    converted = toWords(input.val());
    setTimeout(function() {
        label.empty().text(converted);
    }, 1000);
});​

这似乎解决了我。

答案 3 :(得分:0)

我可能会建议angularJS作为你的最终答案。