Как загрузить данные в текстовое поле?

У меня есть два текстовых поля, и всякий раз, когда я пишу число в первом, оно должно дать мне его имя во втором поле.

Допустим, я пишу 11 в «первом» поле, тогда оно должно автоматически помещать слово «одиннадцать» (НЕ само число) во «второе» поле. И так с любым числом.

Я знаю, что это можно сделать с помощью jQuery, но я просто не знаю, как это сделать. Какие-либо предложения??


person randomizertech    schedule 01.10.2010    source источник
comment
Вы действительно хотите преобразовать 11 в одиннадцать или 11 в 11? Второе легко ($('selectorForSecond').val($(selectorForFirst).val())), первое потребует ууууууууууууууууууууууууууууууууууууууууууоллу много логики.   -  person Matt    schedule 01.10.2010
comment
да, как сказал @matt, это немного сложно, если вы хотите преобразовать целое число в эквивалентное ему алфавитное имя. вам нужно где-то хранить каждое число, соответствующее имени.   -  person    schedule 01.10.2010
comment
Ну, скажем, просто текст. Не обязательно одиннадцать, но скажем имя, если сначала == 11   -  person randomizertech    schedule 01.10.2010
comment
затем второй == Майкл Джексон   -  person randomizertech    schedule 01.10.2010


Ответы (4)


Чтобы связать две строки, проще всего использовать объект для создания словаря/карты, как показано ниже;

$('#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');
person Matt    schedule 01.10.2010
comment
Превосходно!! Большое спасибо!! - person randomizertech; 02.10.2010
comment
Это именно то, что мне было нужно!! - person randomizertech; 02.10.2010
comment
Как это должно быть, если я хочу, чтобы остальные числа были просто пустыми?? - person randomizertech; 02.10.2010
comment
Или как диапазон чисел от 11 до 99 - person randomizertech; 02.10.2010
comment
идеально! Спасибо большое!! Если бы я хотел использовать его с раскрывающимся списком, как вы думаете, это тоже сработает ?? Например, что, если я хочу, чтобы для каждого параметра в первом поле отображались определенные параметры во втором поле?? - person randomizertech; 04.10.2010
comment
Вот ссылка на другой вопрос. На всякий случай. - person randomizertech; 04.10.2010
comment
stackoverflow.com/questions/3852129/ - person randomizertech; 04.10.2010
comment
Эй, у меня есть вопрос, скажем, я должен использовать те же числа и имена в разных текстовых полях, есть ли способ сделать это как функцию javascript с параметрами ??? Например, коды функций (input1, input2){ .... все jQuery... } ??? Спасибо - person randomizertech; 11.10.2010
comment
Идеальный!! Спасибо еще раз! Как сделать значение текстового поля текстом поля?? Потому что, когда я отправляю форму, эти текстовые поля пусты :( - person randomizertech; 11.10.2010
comment
@fgualda87: я не понимаю, что ты имеешь в виду? - person Matt; 12.10.2010
comment
Nvm, я исправил это, я просто забыл связать текстовые поля input2 с остальной частью формы, еще раз спасибо, Мэтт!! - person randomizertech; 13.10.2010

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

вы можете протестировать его здесь http://jsbin.com/owani3

person Community    schedule 01.10.2010
comment
полностью тот же ответ, что и мой интервал в 2 секунды :) - person Nik Chankov; 01.10.2010
comment
использование .live() немного сложно, для простых заданий .bind() просто отлично :) - person ; 01.10.2010
comment
Но мне нужно загрузить какой-то текст, а не то, что я пишу. - person randomizertech; 01.10.2010
comment
проверьте комментарий к ответу выше - person randomizertech; 01.10.2010
comment
@ fgualda87 Привет, можешь уточнить, что именно ты пытаешься сделать? Вы где-то храните данные (вторые) и пытаетесь извлечь данные из контейнера, когда условие выполняется в соответствии с первым значением? - person ; 01.10.2010
comment
Я просто хочу, чтобы во втором поле отображался текст в зависимости от числа в первом поле. - person randomizertech; 01.10.2010

Это должно сделать работу

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

Проверьте рабочую демонстрацию: http://jsfiddle.net/E44Un/

person Nik Chankov    schedule 01.10.2010

Для любого количества текстовых полей это должно работать:

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

просто поместите класс syn в текстовый ввод

person PeterWong    schedule 01.10.2010
comment
Вы должны объявить себя, используя var, чтобы он не был глобальной переменной. - person Matt; 12.10.2010