在焦点/模糊上显示和隐藏提交按钮

Question

我想要一个文本区域表单，当聚焦时从 1 行扩展到 4 行，并且还显示隐藏的提交按钮 - 与 twitter 网站相同。

我有一个工作脚本，但问题是当您单击提交按钮时，它是隐藏的（焦点消失了），因此您实际上无法提交文本。

这是代码（咖啡脚本 - 用于 rails 表单）

$('.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 行。

Answer 1

只需更正您的代码即可。有

会更有意义

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

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

Answer 2

一种方法是检查 textarea 是否不为空（没有咖啡脚本）：

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