Question

我对社区有疑问。

我的问题是我有4个输入文件，最大长度为60个字符，总共240个字符。

由于客户系统的“后端”，最多需要插入4个不同的输入，他们说填4个字段对用户不友好。

我的解决方案

我想制作一个textarea，当你填写它时，我会完成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个nexts。

有任何猜测要完成吗？

- 编辑＃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();
    }
});

Answer 1

尝试这样的事情：

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的原因。

Answer 2

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

但如果用户在textarea中的任何位置键入％_％字符串，则答案可能无法处理。
不考虑最后输入的字符。

我已经制定了一个更为主要的解决方案，即被放弃。但经过反思，并在谷歌浏览器中测试过，我在这里给出：

<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，因此不会忽略最后输入的字符。
我们将使用每个“keyup”更新输入文本，以防用户连续按键而不释放它。

用一个textarea填充4个输入

2 个答案: