Jquery 用一个文本区域填充4个输入_Jquery

Jquery 用一个文本区域填充4个输入

jquery

Jquery 用一个文本区域填充4个输入,jquery,Jquery,我有一个问题要问社区我的问题是，我有4个输入文件，最大长度为60个字符，总共240个字符因为客户系统的“后端”，需要插入最多4个不同的输入，他们说填写4个字段不方便用户 [input text #1] max60 [input text #2] max60 [input text #3] max60 [input text #4] max60 [textarea max 240] 我的解决方案我想做一个文本区，当你填写它时，我会填写4个字段 [input text #1] max60

我有一个问题要问社区

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

因为客户系统的“后端”，需要插入最多4个不同的输入，他们说填写4个字段不方便用户

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

[textarea max 240]

我的解决方案

我想做一个文本区，当你填写它时，我会填写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();
        }
    });
});

试着这样做：

HTML:

请注意，

keydown

不会影响最后键入的字符，这就是为什么我使用

keypress

尝试以下方法：

HTML:

注意，

keydown

不会影响最后键入的字符，这就是为什么我使用

keypress

闪电的解决方案非常漂亮

但如果用户类型%\u%在textarea中的任意位置出现字符串，则答案可能难以处理

不考虑最后键入的字符

我已经想出了一个更基本的解决方案，那就是放弃。但经过反思，并在谷歌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>


$（文档）.ready（函数（）
{
//我的文本区
$（“#inf_notes”）.bind（'keyup'，function（）{
var maxLength=240；
var strInput=$（this.val（）；
var lng=strInput.length；
如果（液化天然气60和液化天然气120和液化天然气180和液化天然气最大长度）{
$（'inf#u notes_1'）.val（strInput.substring（0,60））；
$（'inf#u notes_2'）.val（strInput.substring（60120））；
$（'inf#u notes_3'）.val（strInput.substring（120180））；
$（'inf#u notes_4'）.val（strInput.substring（180240））；
$（this.val（$（this.val（）.substring（0，maxLength））；
$（'.alert_textarea'）.show（）；//简单警报
}
其他的
{
$（'.alert_textarea'）.hide（）；
}
});
});








你的文字太长了！

它只基于length和.substring（）方法

可以处理任何用户输入，包括“%\%”和中断字符串

您必须使用keyup事件，而不是keydown或keypress，因此最后键入的字符不会被忽略

我们将在每次“按键”时更新输入文本，以防用户连续按键而不释放

闪电的解决方案非常漂亮

但如果用户类型%\u%在textarea中的任意位置出现字符串，则答案可能难以处理

不考虑最后键入的字符

我已经想出了一个更基本的解决方案，那就是放弃。但经过反思，并在谷歌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>


$（文档）.ready（函数（）
{
//我的文本区
$（“#inf_notes”）.bind（'keyup'，function（）{
var maxLength=240；
var strInput=$（this.val（）；
var lng=strInput.length；
如果（液化天然气60和液化天然气120和液化天然气180和液化天然气最大长度）{
$（'inf#u notes_1'）.val（strInput.substring（0,60））；
$（'inf#u notes_2'）.val（strInput.substring（60120））；
$（'inf#u notes_3'）.val（strInput.substring（120180））；
$（'inf#u notes_4'）.val（strInput.substring（180240））；
$（this.val（$（this.val（）.substring（0，maxLength））；
$（'.alert_textarea'）.show（）；//简单警报
}
其他的
{
$（'.alert_textarea'）.hide（）；
}
});
});








你的文字太长了！

它只基于length和.substring（）方法

可以处理任何用户输入，包括“%\%”和中断字符串

您必须使用keyup事件，而不是keydown或keypress，因此最后键入的字符不会被忽略

我们将在每次“按键”时更新输入文本，以防用户连续按键而不释放

为什么不只使用一个最多240个字符的文本区域，然后在提交/需要时将内容拆分为4个提交参数（或隐藏字段，如果需要）？也。。如果将单词分解，这样可以吗？因为第一个开发人员将自定义帖子放入数组，我需要将其填入TXT文件。。我也有同样的想法，但当我输入代码时，我对自己说，在前端工作会更容易。在服务器上将一个值分成四个值以填充阵列似乎更简单、更可靠。我更擅长“前端”开发，而您不想看到后端；-）为什么不只使用一个最多240个字符的文本区域，然后在提交/需要时将内容拆分为4个提交参数（或隐藏字段，如果需要）？也。。如果将单词分解，这样可以吗？因为第一个开发人员将自定义帖子放入数组，我需要将其填入TXT文件。。我也有同样的想法，但当我输入代码时，我对自己说，在前端工作会更容易。在服务器上将一个值分成四个值以填充阵列似乎更简单、更可靠。我更擅长“前端”开发，而您不想看到后端；-）这个解决方案似乎很有魅力！我已经找到了一个快速的解决方案，但它保留了我想要删除的4个输入字段。这个解决方案看起来很有魅力！我找到了一个快速解决方案，但它保留了我想要删除的4个输入字段。脚本不需要“超级”验证。。它仅用于“店内”使用。顺便提一下，谢谢你的建议！脚本不需要“超级”验证。。它仅用于“店内”使用。顺便提一下，谢谢你的建议！

<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>