Question

＆＃13;

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

＆＃13;

<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>

＆＃13;

我有点击时将标签转换为文本框的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();
    }
});

如何避免文本框中的空值

2 个答案: