如何避免文本框中的空值

Question

  $(document).on("click", "label.radeem-textbox", function () { var txt = $(".mytxt").text(); $(".radeem-textbox").replaceWith("<input class='radeem-textbox redeem-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); }); 

 <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"> <label class="add-to-wish radeem-textbox">Redeem a Coupon</label> </a> 

I have jquery code for label convert to textbox on click. But when i not enter nothing on textbox, the textbox and label is not showing.. So how to make textbox focused if not enter nothing..

<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

Add with if(txt.trim()) . trim() It will validate the input box is empty or not.Its only allowed its not 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> 

Alternative way is : update with label tag contenteditable its same as your thing

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