0

I have a question for the community.

My problem is that I have 4 input files with a maxlength of 60 caracters for a total of 240 caracters.

Because the "backend" of the customer's system, it need to be 4 differents inputs max to be inserted and they say it is not user-friendly to fill 4 fields.

My solution

I want to make a textarea and when you fill it, il complete the 4 fields.

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

[textarea max 240]

What I am trying to do is to make by javascript/jQuery to fill up the four field while typing in.

At the moment, here is my code.

$(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();
        }
    });
});

It actually works for the first one, but I would like to have some feedbacks to help me complete the script to fill the 3 nexts.

Any guess to complete it?

-- EDIT #1

I found a way that could maybe work! When the first input is completly filled, it will jump to the next field with a .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();
    }
});
4

2 回答 2

4

尝试这样的事情：

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-27T01:10:58.503 回答
0

Flash Thunder的解决方案非常漂亮，

  1. 但如果用户在 textarea 中的任何位置键入%_%字符串，则答案可能难以处理。
  2. 不考虑最后键入的字符。

我已经制定了一个更主要的解决方案，即被放弃。但经过反思并在 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() 方法，

  1. 可以处理任何用户输入，包括 "%_%" 棘手和破坏字符串。
  2. 您必须使用keyup事件，而不是 keydown 或 keypress，因此最后输入的字符不会被忽略。
  3. 我们将使用每个“keyup”更新输入文本，以防用户连续按下键而不释放它。
于 2013-10-27T09:27:56.067 回答