Отображение и скрытие кнопки отправки на фокусе / размытии

Question

Отображение и скрытие кнопки отправки на фокусе / размытии

0

Я хочу иметь форму текстовой области, которая будет расширяться с 1 строки до 4 при фокусировке, а также отображает скрытую кнопку отправки - то же самое, что и сайт Twitter.

У меня есть рабочий сценарий, но проблема в том, что когда вы нажимаете кнопку отправки, она скрыта (фокус ушел), поэтому вы не можете отправить текст.

Здесь код (сценарий кофе - для рельсов)

$('.status-content').focus (event) ->
$(this).attr('rows', '4',)
$('.status-create').show()

$('.status-content').blur (event) ->
$(this).attr('rows', '1')
$('.status-create').hide()

.Status-content - это класс текстовой области, а.status-create - класс кнопки отправки.

Любые идеи о том, как скрыть кнопку, когда фокус выключен, но все же отправить текст?

Основываясь на совете Alex, я попытался добавить setTimeout:

$('.status-content').focus (event) ->
  $(this).attr('rows', '4',)
  $('.status-create').show()

$('.status-content').blur (event) ->
  setTimeout ->
    $(this).attr('rows', '1')
    $('.status-create').hide()
  , 100

Хотя я могу отправить сейчас, область текста остается в 4-х строках, когда фокус теряется.

user3164619 06 янв. 2014, в 10:01

Источник

0

Разобрался - в функции setTimeout нужно изменить 'this' на '.status-content'
user3164619 06 янв. 2014, в 09:27

Теги:

jquery

ruby-on-rails

forms

coffeescript

2 ответа

0

Просто исправьте свой код. Было бы разумнее иметь

$('.status-content').on 'focus', ->
  $(this).attr('rows', '4',)
  $('.status-create').show()

$('.status-content').on 'blur', -> 
  $(this).attr('rows', '1')
  $('.status-create').hide()

devanand 06 янв. 2014, в 07:16

0

Боюсь, это не сильно помогло - кнопка все еще исчезает перед отправкой контента.
user3164619 06 янв. 2014, в 09:19

Ещё вопросы

Разобрался - в функции setTimeout нужно изменить 'this' на '.status-content'
Боюсь, это не сильно помогло - кнопка все еще исчезает перед отправкой контента.

Alex · Accepted Answer · 2014-01-06T06-52-00.000Z

Один из способов - проверить, не является ли текстовое поле пустым (нет сценария для кофе):

$('.status-content').blur(function(event) {
   if ($(this).text().length) {

   }
   else {
      $(this).attr('rows', '1');
      $('.status-create').hide();
   }
});

Или вы делаете небольшой трюк:

var timer;

$('.status-content').blur(function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        $(this).attr('rows', '1');
    $('.status-create').hide();
    }, 100);
});

$('.status-create').click(function() {
    clearTimeout(timer);
});

Я переписал это в coffessscript. Тайм-аут, кажется, на полпути - теперь можно отправить, но когда фокус выключен, текстовая область не возвращается к 1 строке.
$ ('. status-content'). focus (событие) -> $ (this) .attr ('lines', '4',) $ ('. status-create'). show () $ ('. status -content '). blur (событие) -> setTimeout -> $ (this) .attr (' lines ',' 1 ') $ ('. status-create '). hide (), 100