воскресенье, 13 декабря 2009 г.

Пишем под textarea ограничение по числу символов

Задача: под textarea написать "Осталось 87 символов" и динамически обновлять это поле по мере набора текста.



Самой сложной задачей оказалось найти подходящий плагин jQuery. Многие, например, maxlength.js имеют неприятное свойство "блокирования" клавиатуры, когда лимит достигнут. То есть ни del, ни backspace, ни tab не работают, текст больше поправить нельзя. Также добрые три четверти плагинов не предоставляют должной свободы в конфигурировании строки "Осталось 10 символов". Во многих она просто захардкодена.

Привет, Beeline! На твоем сайте в форме отправки SMS та же фигня. Смени плагин ;)

Наименее глючным оказался Simply Countable.

Напишем виджет, который будет выводить текстовое поле, javascript подсчета символов, и строку, в которой будет написано сколько символов осталось.

addOption('max_length', '255');
  }
   
  
  function getJavascripts()
  {
    return array_unique(array_merge(parent::getJavascripts(), array('/js/jquery/jquery.simplyCountable.js')));
  }
  
  public function render($name, $value = null, $attributes = array(), $errors = array())
  {
    $left_chars_element_id=$this->generateId($name).'_left_chars';
    
    $counter_js=sprintf(<<<EOF

EOF
    ,
    $this->generateId($name),
    $left_chars_element_id,
    $this->getOption('max_length')
    );
    
    $left_chars_element='<br>Осталось <span id="'.$left_chars_element_id.'">'.($this->getOption('max_length')-strlen($value)).'</span> символов';
    
    
    return parent::render($name, $value, $attributes, $errors).$left_chars_element.$counter_js;
  }
}



И используем в форме:

$this->widgetSchema['description']=new sfWidgetFormTextareaExtended(array(
  'max_length'=>500,
));

Используемый плагин jQuery позволяет делать еще интересные штучки:
- считать не символы, а слова
- писать не сколько осталось, а сколько набрано
- может не ограничивать длину текста, а просто сообщать о том, что печатающий увлекся
- позволяет наложить css-классы на цифру: класс на "Осталось" и отдельный класс на "Перебор".


Но нет предела совершенству. Желающие могут доработать виджет, и сделать слово "символов" склоняемым (1 символ, 2 символа, 10 символов).

Комментариев нет:

Отправить комментарий