聚焦textarea

Question

在下面的代碼中，textarea添加了6次，最初textarea包含文本Enter Text。 我的問題是，如果用戶在第一個和第三個textareas中輸入數據。 如何提醒用戶說「textareas是空的」這是一個普遍的信息，但關注第二個textarea，當用戶在第二個輸入數據時，應該關注下一個textarea。

<script> 
function ad_R(count) 
{ 
    //Adding and populating table row 
    var row = '<tr>'; 
    row += '<td>'; 
    row += '<textarea rows = "8" cols = "18" border ="0" class="input" style="border:none;overflow:visible;width:100%;" id="details'+count+'" nfocus="if (this.value == \'Enter text\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'Enter text\';" name ="detail'+count+'" class="row_details'+r_count+'">Enter text</textarea></td></tr>'; 
    } 

    $(document).ready(function() { 
    cnt += '<table cellspacing="0" cellpadding="0" border="1" width="100%" id="_table">'; 
    cnt += '<tr>'; 
    cnt += '<th width="30%">Category</th>'; 
    cnt += '</tr>'; 
    for(var i=0;i<6;i++) 
    { 
     cnt += add_R(6); 
    } 
    cnt += '</table>'; 

    }); 

Answer 1

一般來說，你應該擺脫那些內聯處理程序，如onblur=。

改爲對所有這些事件使用jQuery。對於實例

$('textarea').bind('focusout', function(e){ 
    if($(this).val() == "") 
     alert('Textarea ' + this.id + ' is empty'); 
}); 

我怕我沒有完全理解你正在試圖進一步做的，但我敢肯定 您可以管理的一些處理您的所有需求。

$('textarea').bind('keydown', function(e){ 
    var $next = $(this).next('textarea'); 
    if($next) $next.focus(); 
}); 

會跳轉到下一個文本區域（即使我不知道爲什麼）

編輯 因爲你onthefly添加這些文字區域，你也許應該使用.live()或 更好.delegate()到綁定這些事件處理程序。

Answer 2

有一點缺少該片段「編譯」（一些明顯的全局cnt和R_ count），是功能ad_R或add_R？
函數也不會返回任何東西，所以document-ready函數中返回值的+=不會很好。
我想你也想發送索引計數（i）而不是硬編碼的數字6當你調用該函數？而且，當你爲textarea構建HTML字符串時，有一個屬性「nfocus」，可能很可能是「onfocus」。

除此之外，目標是以某種方式讓用戶以特定順序在區域中輸入文本？也就是說，不要在1之前填寫2，2在2之前等等？

Answer 3

對於用戶來說，讓輸入表單像你所描述的那樣行爲是非常煩人的。在用戶操作之後進行textarea驗證會更好，如點擊按鈕。這些行爲暗示用戶認爲他/她已完成輸入，這是執行驗證的絕佳時機。

這裏的一個試片的驗證代碼，其中顯示了丟失的文本區域輸入的警報並給予其焦點的消息之後：

$(document).ready(function() { 
    $("#buttonid").click(function() { 
     for (var i = 0; i < 6; i++) { 
      if ($("#details" + i).val() == "") { 
       alert("You are missing some input!"); 
       $("#details" + i).focus(); 
       return false; 
      } 
     } 
     return true; 
    }); 
}