聚焦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; 
    }); 
}