Question

我有以下代码：

$('input[type="text"]').css({'width': '0px', 'border-width': '0px'});
var noOfClicks = 0;
$('input[type="text"]').on('blur',function(e){
    if(e.target !== $(this).next()){
        $(this).animate({'width': '0px', 'border-width': '0px'});
        noOfClicks = 0;
    }
});
$('input[type="image"]').on('click',function(e){


    if(++noOfClicks % 2 !== 0)
    e.preventDefault();
    $(this).prev().animate({'width': '338px', 'border-width': '1px'});
})

如果文本框模糊，我想为其设置动画，但如果用户点击input[type="image"]按钮，则不会。

demo

我很确定我在这里做错了：

if(e.target !== $(this).next()){

Answer 1

将两个元素放在容器div中，然后删除文本框的blur事件。然后，只要用户点击该div之外，就隐藏文本框

def in_words(int)
  numbers_to_name = {
      10**18 => "quintillion", 10**15 => "quadrillion", 10**12 => "trillion",
      10**9 => "billion", 10**6 => "million", 1000 => "thousand", 100 => "hundred", 
      90 => "ninety", 80 => "eighty", 70 => "seventy", 60 => "sixty", 50 => "fifty",
      40 => "forty", 30 => "thirty", 20 => "twenty", 19=>"nineteen",
      18=>"eighteen", 17=>"seventeen", 16=>"sixteen", 15=>"fifteen",
      14=>"fourteen", 13=>"thirteen", 12=>"twelve", 11 => "eleven", 10 => "ten", 
      9 => "nine", 8 => "eight", 7 => "seven", 6 => "six", 5 => "five",
      4 => "four", 3 => "three", 2 => "two", 1 => "one"
    }
  str = ""
  numbers_to_name.each do |num, name|
    if int == 0
      return str
    elsif int.to_s.length == 1 && int/num > 0
      return str + "#{name}"      
    elsif int < 100 && int/num > 0
      return str + "#{name}" if int%num == 0
      return str + "#{name} " + in_words(int%num)
    elsif int/num > 0
      return str + in_words(int/num) + " #{name} " + in_words(int%num)
    end
  end
end

def words_from_numbers number 
  fix = number.to_i == 0 ? "zero" : in_words(number.to_i).strip.gsub('hundred ','hundred and ')
  frac = number - number.to_i == 0 ? "" : " point one"
  fix + frac

end

Fiddle

Answer 2

由于模糊事件发生在失去焦点并且下一个元素聚焦之前，我建议你：

＆＃xA;＆＃xA;

设置一个小计时器将检查聚焦元素是否是图像输入，如果不是，它将运行回调
或收听身体焦点事件而不是文本输入模糊事件那样你就有足够的时间来检查重点是什么，决定做什么

＆＃xA;

Answer 3

按预期工作。您需要做的就是确保每次单击搜索时输入都是焦点。所以，现在只要你点击输入外，你的模糊事件就会被触发。

$('input[type="text"]').css({'width': '0px', 'border-width': '0px'});
var noOfClicks = 0;
$('input[type="text"]').on('blur',function(e){
    if(e.target !== $(this).next()){
        $(this).animate({'width': '0px', 'border-width': '0px'});
        noOfClicks = 0;
    }
});
$('input[type="image"]').on('click',function(e){


    if(++noOfClicks % 2 !== 0)
    e.preventDefault();
    $(this).prev().animate({'width': '338px', 'border-width': '1px'}).focus();

})

链接到小提琴 - https://jsfiddle.net/kynxd2yb/2/

如果未在其他输入按钮中单击，则模糊功能

3 个答案: