如何避免空值在文本框

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(); 
    } 
});