如何在輸入結帳時做些事情？

Question

這裏是我的代碼：

$(document).on('checkout', 'input', function(){ 
 
    alert('input is not focused anymore'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" />

，但不會顯示該警報時，我籤的是輸入的。我的意思是當我點擊任何地方時除了關注輸入外沒有任何反應。對不起，我不懂英文，也無法解釋我想要什麼。我想申請一些像stackoverflow的搜索框。

正如你可以看到它在當前頁面的頂部，當你點擊搜索輸入（這是到計算器的頭），輸入的width將增加（和一些其他的CSS屬性會設置），並且當您在其他地方點擊（checkout事件）時，width將被切換。無論如何，我想這樣做。

爲什麼checkout事件在我的代碼中沒有反應？

Answer 1

沒有什麼像checkout事件，其blur即焦點輸入元素丟失。這是輸入失去焦點時的觸發器。

$('input:text').bind('focus blur', function() { 
 
    $(this).toggleClass('red'); 
 
});

input{ 
 
    background:#FFFFEE; 
 
} 
 
.red{ 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
    <input class="calc_input" type="text" name="start_date" id="start_date" /> 
 
    <input class="calc_input" type="text" name="end_date" id="end_date" /> 
 
    <input class="calc_input" size="8" type="text" name="leap_year" id="leap_year" /> 
 
</form>

檢查上面的例子中，在該輸入的顏色被改變焦點和模糊重新改變。用同樣的方法可以增加輸入的寬度，反之亦然。