Фокусировка текстовой области - PullRequest
Новая
       10

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

1 голос
/ 09 апреля 2010

В коде ниже текстовая область добавляется 6 раз, и изначально текстовая область содержит текст Enter Text. У меня вопрос, если пользователь вводит данные в первую и третью текстовые области. Как предупредить пользователя о том, что «текстовые области пусты», это общее сообщение, но основное внимание уделяется 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>';

   });

Ответы [ 3 ]

1 голос
/ 09 апреля 2010

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

будет переходить к следующей текстовой области (даже если я не буду знать, почему)

редактировать так как вы добавляете эти текстовые области на thefly, вы, возможно, должны использовать .live() или еще лучше .delegate() связать эти обработчики событий.

1 голос
/ 09 апреля 2010

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

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

$(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 голосов
/ 09 апреля 2010

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

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

...