聚焦文本区域

Posted 2023-05-09

【中文标题】聚焦文本区域

【英文标题】：Focusing a textarea

【发布时间】：2011-02-06 00:20:06

【问题描述】：

在下面的代码中，一个 textarea 添加了 6 次，最初 textarea 包含文本 Enter Text。 我的问题是，如果用户在第一个和第三个文本区域中输入数据。 如何提醒用户说“文本区域为空”这是一条一般消息，但关注第二个文本区域，当用户在第二个文本区域输入数据时，应该关注下一个文本区域。

 <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"  id="_table">';
   cnt += '<tr>';
   cnt += '<th >Category</th>';
   cnt += '</tr>';
   for(var i=0;i<6;i++)
   
      cnt += add_R(6);
     
    cnt += '</table>';

   );

【参考方案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();
);

会跳转到下一个文本区域（即使我不知道为什么）

编辑 由于您正在即时添加这些文本区域，因此您可能应该使用 .live() 或 更好的.delegate() 绑定这些事件处理程序。

【参考方案2】：

对于用户来说，输入表单的行为与您所描述的一样，这很烦人。最好在用户操作后进行 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;
    );

【参考方案3】：

该 sn-p 缺少“编译”（一些明显的全局变量 cnt 和 r_count），函数是 ad_R 还是 add_R？ 该函数也不返回任何内容，因此其返回值在document-ready 函数中的+= 不会很好地工作。 我猜你也想在调用函数时发送索引计数（i）而不是硬编码数字6？而且，当您为 textarea 构建 html 字符串时，有一个属性“nfocus”很可能是“onfocus”。

除此之外，目标是否以某种方式让用户以特定顺序在区域中输入文本？即1前不填2，2前不填3等等？