Заполните 4 ввода одним текстовым полем

У меня есть вопрос для сообщества.Заполните 4 ввода одним текстовым полем

Моя проблема заключается в том, что у меня есть 4 входных файла с максимальной длиной 60 символов в общей сложности 240 символов.

Поскольку «бэкэнд» системы заказчика должен быть вставлен в 4 разных входа max, и они говорят, что это не удобно для заполнения 4 полей.

Мое решение

Я хочу сделать текстовое поле и когда вы заполняете его, иль заполнить 4 поля.

[input text #1] max60 
[input text #2] max60 
[input text #3] max60 
[input text #4] max60 

[textarea max 240]

То, что я пытаюсь сделать, это сделать с помощью JavaScript/JQuery, чтобы заполнить четыре поля при вводе в.

На данный момент, вот мой код.

$(document).ready(function() 
{ 
      // My text area 
    $("#inf_notes").bind('keydown', function() { 

        var maxLength = 240; 

     if ($(this).val().length <= 60) { 
         // The first 60 caracters 
      $('#inf_notes_1').val($(this).val()); 
     } 

     if ($(this).val().length > 60 && $(this).val().length <= 120) { 
         // If more then 60, fill the second field 
      $('#inf_notes_2').val($(this).val()); 
     } 

        // If 121 - 180 ... 
        // If 181 - 240 ... 

        if($(this).val().length == 240) { 
          $(this).val($(this).val().substring(0, maxLength)); 
       $('.alert_textarea').show(); // Simple alert 
     else 
     { 
      $('.alert_textarea').hide(); 
     } 
    }); 
});

Это на самом деле работает на первый, но я хотел бы иметь некоторые обратные связи, чтобы помочь мне закончить сценарий, чтобы заполнить 3 команд NEXT.

Любое предположение, чтобы завершить его?

- EDIT # 1

я нашел способ, который мог бы, возможно, работать! Когда первый вход укомплектовать заполнен, он будет переходить к следующему полю с .focus()

$(".inf_notes").bind('keydown', function() 
{ 
    var notes1 = $('#inf_notes_1').val(); 
    var notes2 = $('#inf_notes_2').val(); 
    var notes3 = $('#inf_notes_3').val(); 
    if (notes1.length == 60) 
    { 
     $('#inf_notes_2').focus(); 
    } 
    if (notes2.length == 60) 
    { 
     $('#inf_notes_3').focus(); 
    } 
    if (notes3.length == 60) 
    { 
     $('#inf_notes_4').focus(); 
    } 
});

источник

2013-10-27 Patrice Poliquin

Почему бы просто не иметь только одно текстовое поле, которое занимает до 240 символов, а затем при его отправке/необходимости оно разбивает содержимое на 4 submit params (или скрытые поля, если необходимо)? Также .. если это сломает слова, это нормально? – scunliffe

Поскольку первый разработчик создал пользовательский пост в массиве, и мне нужно заполнить его в TXT-файле. У меня была такая же идея, но когда я вошел в код, я сказал себе, что было бы легче работать над внешний интерфейс. –

все еще кажется более простым и надежным, чтобы разделить одно значение на четыре на сервере, чтобы заполнить ваш массив. – charlietfl

попробовать что-то вроде этого:

HTML:

<input id="inf_notes_0" type="text" /> 
<input id="inf_notes_1" type="text" /> 
<input id="inf_notes_2" type="text" /> 
<input id="inf_notes_3" type="text" /> 

<textarea id="inf_notes"></textarea>

JS:

$(function(){ 
    $("#inf_notes").keypress(function(){ 
     var str = $(this).val(); 
     var chunks = str.replace(/.{60}/g, "$&%_%").split("%_%"); 
     $.each(chunks,function(i,o){ 
     $('#inf_notes_'+i).val(o); 
     }); 
    }); 
});

http://jsfiddle.net/aDkDM/1/

PS. Обратите внимание: keydown не повлияет на последний типизированный символ, поэтому я использовал keypress.

источник

2013-10-27 01:10:58

Это решение, похоже, работает как прелесть! Я нашел быстрое решение, но он сохраняет 4 поля ввода, которые я хотел удалить. –

+1 Я действительно ценю этот код. – jacouh

Решение Flash-Гром очень красивое,

, но в случае, когда тип пользователя % _% строки где-нибудь в текстовом поле, ответ может иметь проблемы с обработкой.
Последний типизированный символ не принимается во внимание.

Я разработал решение, которое является более основным, то есть заброшенным. Но после размышлений и тестирования в Google Chrome я подаю его здесь:

<html> 
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 
$(document).ready(function() 
{ 
    // My text area 
    $("#inf_notes").bind('keyup', function() { 
    var maxLength = 240; 
    var strInput = $(this).val(); 
    var lng = strInput.length; 

    if (lng <= 60) { 
     // The first 60 caracters 
     $('#inf_notes_1').val(strInput); 
     $('#inf_notes_2').val(""); 
     $('#inf_notes_3').val(""); 
     $('#inf_notes_4').val(""); 
    } 
    else if (lng > 60 && lng <= 120) { 
     // If more then 60, fill the second field 
     $('#inf_notes_1').val(strInput.substring(0, 60)); 
     $('#inf_notes_2').val(strInput.substring(60, lng)); 
     $('#inf_notes_3').val(""); 
     $('#inf_notes_4').val(""); 
    } 
    else if (lng > 120 && lng <= 180) { 
     // If more then 120, fill the third field 
     $('#inf_notes_1').val(strInput.substring(0, 60)); 
     $('#inf_notes_2').val(strInput.substring(60, 120)); 
     $('#inf_notes_3').val(strInput.substring(120, lng)); 
     $('#inf_notes_4').val(""); 
    } 
    else if (lng > 180 && lng <= 240) { 
     // If more then 180, fill the fourth field 
     $('#inf_notes_1').val(strInput.substring(0, 60)); 
     $('#inf_notes_2').val(strInput.substring(60, 120)); 
     $('#inf_notes_3').val(strInput.substring(120, 180)); 
     $('#inf_notes_4').val(strInput.substring(180, lng)); 
    } 

    if(lng > maxLength) { 
     $('#inf_notes_1').val(strInput.substring(0, 60)); 
     $('#inf_notes_2').val(strInput.substring(60, 120)); 
     $('#inf_notes_3').val(strInput.substring(120, 180)); 
     $('#inf_notes_4').val(strInput.substring(180, 240)); 
     $(this).val($(this).val().substring(0, maxLength)); 
     $('.alert_textarea').show(); // Simple alert 
    } 
    else 
    { 
     $('.alert_textarea').hide(); 
    } 
    }); 
}); 
</script> 
</head> 
<body> 
<form> 
<input id="inf_notes_1" type="text" size="80" /><br> 
<input id="inf_notes_2" type="text" size="80" /><br> 
<input id="inf_notes_3" type="text" size="80" /><br> 
<input id="inf_notes_4" type="text" size="80" /><br> 

<textarea id="inf_notes" style="width: 500px; height: 100px;"></textarea> 
</form> 
<div class="alert_textarea" style="display:none;">Your text is too long!</div> 
</body> 
</html>

Он основан только на длине и.substring(),

может обрабатывать любые вводные данные пользователя, включая «% _%» сложную и прерывистую строку.
вы должны использовать keyup событие, а не keydown или keypress, поэтому последним типизированным символом не пренебрегают.
Мы будем обновлять текст ввода с каждой «клавиатурой», если пользователь нажимает клавишу непрерывно, не отпуская ее.

источник

2013-10-27 09:27:56 jacouh

Скрипт не нуждается в «супер» проверке. Он используется только для использования «в магазине». Thx за предложение, кстати! –

Заполните 4 ввода одним текстовым полем

ответ

Смежные вопросы