Фокусировка текстовой области

В приведенном ниже коде текстовое поле добавляется 6 раз, и изначально текстовое поле содержит текст Введите текст. Мой вопрос в том, если пользователь вводит данные в первую и третью текстовые области. Как предупредить пользователя о том, что «текстовые поля пусты», это общее сообщение, но сосредоточьтесь на 2-м текстовом поле, и когда пользователь вводит данные во 2-м, следующее текстовое поле должно быть сфокусировано.

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

   });

javascript jquery jquery-validate jquery-selectors
person Hulk    schedule 09.04.2010    source источник

Ответы (3)


arrow_upward
1
arrow_downward

В общем, вам следует избавиться от таких встроенных обработчиков, как 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() для привязки этих обработчиков событий.

person jAndy    schedule 09.04.2010

arrow_upward
1
arrow_downward

Пользователя очень раздражает, когда форма ввода ведет себя так, как вы описываете. Лучше выполнять проверку текстовой области после действия пользователя, например, нажатия кнопки. Эти действия подразумевают, что пользователь предполагает, что он закончил со своим вводом, что является отличным моментом для выполнения проверки.

Вот пример кода проверки, который отображает предупреждение об отсутствующем вводе текстовой области и переводит его в фокус после сообщения:

$(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;
    });
}
person Prutswonder    schedule 09.04.2010

arrow_upward
0
arrow_downward

В этом фрагменте немного не хватает для "компиляции" (некоторые очевидные глобальные переменные cnt и r_count), и является ли функция ad_R или add_R?
Функция также ничего не возвращает, поэтому += ее возвращаемого значения в document-ready функция не будет работать так хорошо.
Я думаю, вы также хотите, чтобы при вызове функции отправлялся индексный счетчик (i), а не жестко закодированный номер 6? И когда вы строите строку HTML для текстовой области, есть атрибут «nfocus», который вполне может означать «onfocus».

Кроме того, есть ли цель каким-то образом заставить пользователя вводить текст в областях в определенном порядке? То есть не заполнять 2 перед 1, 3 перед 2 и так далее?

person npup    schedule 09.04.2010