如何在文本字段上加载数据？答案

【问题标题】：How to load data on a text field?如何在文本字段上加载数据？
【发布时间】：2011-04-20 00:31:40
【问题描述】：

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

假设我在“第一个”字段上写了 11，那么它应该自动将单词“十一”（不是数字本身）放在“第二个”字段上。任何数字都是一样的。

我知道这可以用 jQuery 来完成，但我不知道怎么做。有什么建议吗？？

【问题讨论】：

您真的想将“11”转换为“11”，还是将“11”转换为“11”。第二个很简单 ($('selectorForSecond').val($(selectorForFirst).val()))，前者需要 whoooooooole 很多逻辑。
是的，正如@matt 所说，如果要将整数转换为等效的字母名称，这有点复杂。您需要将每个数字对应的名称存储在某个位置。
好吧，让我们说一些文字。不一定是“十一”，但我们可以说一个名字，如果 first == 11
然后第二个 == "迈克尔杰克逊"

标签： javascript jquery input textfield textinput

【解决方案1】：

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

你可以在这里测试它http://jsbin.com/owani3

【讨论】：

与我的 2 秒间隔的答案完全一样 :)
虽然使用.live() 有点复杂，但对于简单的工作.bind() 就好了:)
但是我需要加载一些文本，和我写的不一样。
查看以上答案的评论
@fgualda87 嗨，你能更具体一点，你到底想做什么？您是否将数据（第二个）存储在某个位置并在根据第一个值满足条件时尝试从容器中获取数据？

【解决方案2】：

要关联两个字符串，最简单的方法是使用对象来创建字典/映射，如下所示；

$('#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”更改为“change”。

要将其抽象为一个函数，您可以这样做：

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');

【讨论】：

太棒了！！非常感谢！！
这正是我所需要的！！
如果我希望其余的数字都是空白的，该怎么办？？
或者喜欢11-99的数字范围
完美！非常感谢你！！如果我想将它与下拉框一起使用，您认为它也可以吗？比如如果我希望第一个框上的每个选项都在第二个框上显示某些选项怎么办？？

【解决方案3】：

这应该可以完成工作

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

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

【讨论】：

【解决方案4】：

对于任意数量的文本框，这应该可以工作：

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

只需在您的文本输入中添加一个 syn 类

【讨论】：

您应该使用var 声明“self”，以防止它成为全局变量。