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

时间:2014-01-06 08:18:58

标签: jquery ruby-on-rails forms coffeescript

我希望有一个文本区域表单,在聚焦时从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行。

2 个答案:

答案 0 :(得分:0)

一种方法是检查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);
});

答案 1 :(得分:0)

只需更正您的代码即可。

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

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