用一個文本區填充4個輸入

我的問題是，我有4個輸入文件，最大長度爲60個字符，共240個字符。

由於客戶系統的「後端」，需要插入4個不同輸入最大值，並且他們表示填充4個字段時不方便用戶。

我的解決方案

我想打一個textarea，當你填充它，IL完成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。

任何猜測來完成它？

- 編輯＃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

爲什麼不只有一個textarea最多需要240個字符，然後在提交/需要時將內容分割爲4個提交參數（如果需要，隱藏字段）？另外..如果這打破了話，這可以嗎？ – 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。請注意，不會影響上次輸入的字符，這就是爲什麼我使用keypress。

來源

2013-10-27 01:10:58

此解決方案似乎像一個魅力！我找到了一個快速解決方案，但它保留了我想刪除的4個輸入字段。 –

+1我真的很欣賞這個代碼。 – jacouh

閃光雷的解決方案是很漂亮，

但在情況下，用戶類型％_％在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，因此最後輸入的字符不會被忽略。
如果用戶連續按鍵而不釋放它，我們將用每個「鍵盤」更新輸入文本。

來源

2013-10-27 09:27:56 jacouh

該腳本不需要「超級」驗證。僅適用於「店內」使用。 Thx的方式的建議！ –

用一個文本區填充4個輸入

回答

相關問題