如何使用jQuery/CSS顯示div焦點？

Question

<div class="box"> 
    <input type="text" value="url" /> 
    <span class="add-btn"> + </span> 
</div> 

點擊添加按鈕或加號，另一個盒子應該是動態添加的。如何在jQuery中實現它。

$('.box input[type=text]').blur(function() { 
    //Whatever you want to do. 
}); 

入住這JSFiddle

顯示在div取決於你如何實現它一下：

Answer 1

使用.blur()當一個字段失去焦點觸發。

最簡單的方法是添加另一個DIV一個ID，並設置成隱藏這樣的風格：

<div class="box"> 
    <input type="text" value="url" /> 
</div> 
<div id="secondDiv" style="display: none;"> 
    <input type="text" value="other field" /> 
</div> 

然後使用.show()表現出來：

$('.box input[type=text]').blur(function() { 
    $('#secondDiv').show(); 
}); 

見本JSFiddle

Answer 2

這是你可以做什麼：

$(".box").on("focusout", "input", function(){ 
    $(".box").append("<br/><input/>"); 
}); 

Here is the JSFiddle demo

Answer 3

$('.input-1').focusout(function() { 
 
    $('.input-2').show(); 
 
});

.input-2 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="box"> 
 
    <input type="text" value="url" class="input-1" /> 
 
    <input type="text" value="url" class="input-2" /> 
 
</div>

Answer 4

默認添加兩個文本框，而是將其中一個設置爲隱藏。在焦點從第一個文本框的只是刪除第二個

HTML的隱藏屬性：

<input type="text" value="url" id=txt1/> 
<input type="text" value="url" id=txt2 hidden/> 

腳本：

$(document).ready(function(){ 

$('#txt1').blur(function(){ 

$('#txt2').removeAttr('hidden') 

}) 

})