聚焦文本区域

发布于 2024-08-28 09:23:37 字数 1019 浏览 3 评论 0原文

在下面的代码中，文本区域添加了 6 次，并且最初文本区域包含文本 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" 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>';

   });

原文

Int he below code a textarea is added 6 times and initially the textarea conatins the text Enter Text.
My question is, if the user enters data in first and third textareas.
How to give alert to the user saying that the "textareas are empty" this is a general message but focus on the 2nd textarea and when the user enters data in 2nd the next textarea should be focused.

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

   });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

送君千里 2024-09-04 09:23:37

一般来说，您应该摆脱那些内联处理程序，例如 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() 来绑定这些事件处理程序。

In general, you should get rid of those inline handlers like onblur=.

Use jQuery for all those events instead. For Instance

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

I'm afraid I didn't fully understand what you are trying to do further, but I'm sure
you can manage all your needs with some handlers.

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

would jump to the next textarea (even if I wouldn't know why)

edit
since you are adding those textareas onthefly, you maybe should use .live() or
even better .delegate() to bind those event handlers.

回复收藏 0 原文

荆棘i 2024-09-04 09:23:37

对于用户来说，让输入表单表现得像您所描述的那样是非常烦人的。最好在用户操作（例如单击按钮）后进行文本区域验证。这些操作意味着用户假设他/她已完成输入，这是执行验证的绝佳时机。

下面是一段验证代码示例，它显示缺少文本区域输入的警报，并在消息后为其提供焦点：

$(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;
    });
}

It's very annoying for a user to have an input form behave like you're describing. It's better to do the textarea validation after a user action, like a button click. Those actions implicate that the user assumes that he/she is done with their input, which is an excellent moment to perform validation.

Here's a sample piece of validation code, which displays an alert for the missing text area input and gives it focus after the message:

$(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;
    });
}

回复收藏 0 原文

遇到 2024-09-04 09:23:37

该代码片段“编译”时缺少一点（一些明显的全局变量 cnt 和 r_count），并且是函数 ad_R 或 add_R？
该函数也不返回任何内容，因此 document-ready 函数中其返回值的 += 无法正常工作。
我想您还想在调用函数时发送索引计数 (i) 而不是硬编码数字 6 ？而且，当您为文本区域构建 HTML 字符串时，有一个属性“nfocus”很可能意味着“onfocus”。

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