如何避免空值在文本框

Question

$(document).on("click", "label.radeem-textbox", function() { 
 
     var txt = $(".mytxt").text(); \t \t 
 
     $(".radeem-textbox").replaceWith("<input class='radeem-textbox redeem-textbox'/>"); \t \t 
 
     $(".radeem-textbox").val(txt); 
 
\t \t return false; \t \t 
 
    }); 
 

 
    $(document).on("blur", "input.radeem-textbox", function() { 
 
     var txt = $(this).val(); 
 
     $(this).replaceWith("<label class='radeem-textbox'></label>"); \t \t 
 
     $(".radeem-textbox").text(txt); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<a href="javascript:void(0)" class="right-side-margin-top right-side-margin-bottom display-block add-to-wishlist"> 
 
\t \t \t \t \t \t \t 
 
<label class="add-to-wish radeem-textbox">Redeem a Coupon</label> 
 
         </a>

我有jQuery代碼的標籤轉換爲文本框上點擊。但是，當我不能在文本框中輸入任何內容，文本框和標籤不顯示。所以如何使文本的重點，如果不輸入任何內容..

<label class="add-to-wish radeem-textbox">Redeem a Coupon</label> 



<script type="text/javascript"> 
$(document).on("click", "label.radeem-textbox", function() { 
    var txt = $(".mytxt").text();  
    $(".radeem-textbox").replaceWith("<input class='radeem-textbox'/>");   
    $(".radeem-textbox").val(txt); 
    return false;  
}); 

$(document).on("blur", "input.radeem-textbox", function() { 
    var txt = $(this).val(); 
    $(this).replaceWith("<label class='radeem-textbox'></label>");  
    $(".radeem-textbox").text(txt); 
}); 

Answer 1

添加與if(txt.trim())。 trim()它會驗證輸入框是否爲空，它只允許它不是empty,null。

$(document).on("click", "label.radeem-textbox", function() { 
 
    var txt = $(".mytxt").text();  
 
    $(".radeem-textbox").replaceWith("<input class='radeem-textbox'/>");   
 
    $(".radeem-textbox").val(txt); 
 
    return false;  
 
}); 
 

 
$(document).on("blur", "input.radeem-textbox", function() { 
 
    var txt = $(this).val(); 
 
    if(txt.trim()){ 
 
    $(this).replaceWith("<label class='radeem-textbox'></label>");  
 
    $(".radeem-textbox").text(txt); 
 
    } 
 
    else{ 
 
    console.log('enter text please') 
 

 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="add-to-wish radeem-textbox">Redeem a Coupon</label>

替代方法是： 更新標籤標記 contenteditable它作爲你的東西一樣

<label contenteditable="true">Click me to edit me</label>

Answer 2

$(document).on("blur", "input.radeem-textbox", function() { 
    var txt = $(this).val(); 
    if($.trim(txt).length) { // if not empty value 
     $(this).replaceWith("<label class='radeem-textbox'></label>");  
     $(".radeem-textbox").text(txt); 
    } else { 
     //empty value so focus again. 
     $(this).focus(); 
    } 
});