Wie Null-Wert in Textbox

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>

ich jQuery-Code müssen vermeiden Textbox auf Klick für Etikett konvertieren. Aber wenn ich nicht nichts auf Textfeld ein, das Textfeld und Etikett zeigen nicht .. Also, wie Textbox konzentriert zu machen, wenn nicht nichts eingeben ..

<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

mit if(txt.trim()) hinzufügen. trim() Es wird validiert das Eingabefeld ist leer oder nicht. Es ist nur erlaubt, es nicht 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 Weg ist: Update mit Label-Tag contenteditable seine gleiche wie Ihre Sache

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