Question

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

Answer 1

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

Answer 2

只需更正您的代码即可。

更有意义

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

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

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

2 个答案: