如何在文本字段上加载数据?

时间:2010-10-01 18:50:51

标签: javascript jquery input textfield textinput

我有两个文本字段,每当我在第一个字母中写一个数字时,它应该在第二个字段上给我它的名字。

假设我在“第一个”字段上写了11,那么它应该自动将 '11'(非数字本身)放在“第二个”字段上。任何数字都是一样的。

我知道这可以用jQuery完成,但我只是不知道如何。 有什么建议??

4 个答案:

答案 0 :(得分:3)

$(function() {
  $('.input').bind('keyup',function() {
     $('.output').val($(this).val());
  });
});

您可以在此处进行测试 http://jsbin.com/owani3

答案 1 :(得分:1)

这应该做的工作

$('#f1').live('keyup', function(){
    $('#f2').val($(this).val())
})

检查工作演示:http://jsfiddle.net/E44Un/

答案 2 :(得分:1)

对于任意数量的文本框,这应该有效:

​​$(".syn").live("keyup", function() {
  var self = $(this);
  $(".syn").each(function() {
    $(this).val(self.val());
  });
})​​​​​​​​​​​​​​​

只需将一个班级syn添加到您的文字输入

答案 3 :(得分:1)

要关联两个字符串,最简单的方法是使用一个对象来创建一个字典/地图,如下所示;

$('#input1').bind('keyup',function() {
     var map = {
         "1":"One",
         "2":"Fish",
         "3":"Bar"
     };

     $('#input2').val(map[$(this).val()]);
});

您可以在此处查看此操作:http://www.jsfiddle.net/dCy6f/

更高级的行为:

$('#input1').bind('keyup',function() {
     var str = '';
     var input = $(this).val();
     var intVal = parseInt(input, 10); // Dont forget the radix
     var map = {
         "1":"One",
         "2":"Fish",
         "3":"Bar"
     };

     if (intVal > 50 && intVal < 100) {
         str = 'Something';
     } else if (map.hasOwnProperty(input)) {
         str = map[input];
     }

     $('#input2').val(str);
});

您可以在此处测试此实施:http://www.jsfiddle.net/H6skz/

如果您希望仅在用户输入第一个输入字段时更新第二个值,请将“keyup”更改为“更改”。

要将其抽象为函数,您可以这样做:

function relate(me, withMe) {
    $(me).bind('keyup',function() {
         var str = '';
         var input = $(this).val();
         var intVal = parseInt(input, 10); // Dont forget the radix
         var map = {
             "1":"One",
             "2":"Fish",
             "3":"Bar"
         };

         if (intVal > 50 && intVal < 100) {
             str = 'Something';
         } else if (map.hasOwnProperty(input)) {
             str = map[input];
         }

         $(withMe).val(str);
    });
}

然后按如下方式使用它:

relate('#input1', '#input2');

要获得更直观的界面,请编写一个jQuery插件:

(function ($) {
    jQuery.fn.relate = function (withMe) {
        this.bind('keyup',function() {
             var str = '';
             var input = $(this).val();
             var intVal = parseInt(input, 10); // Dont forget the radix
             var map = {
                 "1":"One",
                 "2":"Fish",
                 "3":"Bar"
             };

             if (intVal > 50 && intVal < 100) {
                 str = 'Something';
             } else if (map.hasOwnProperty(input)) {
                 str = map[input];
             }

             $(withMe).val(str);
        });
    };
}(jQuery));

然后使用如下:

$('#input1').relate('#input2');