Question

我对jquery很新。我在这里有一个重大疑问。基本上我想在jquery做一个递归的东西！我在div里面有一个文本框。用户可以在文本框中输入他的名字，然后当他点击文本框时，我想隐藏文本框并打印用户在分区的文本框中写的任何内容（我能够完美地做到这一点，但问题是摆在面前）。假设用户在输入时犯了一些错误，现在我想要的是当用户点击该div时我想要同样的文本框。然后，当他再次点击该文本框时，文本框应该隐藏，输入的文本应该打印在div中。

我的HTML代码：

 <html>
<body>
<div style="width:18px; font-weight:bold; text-align:center;" id="filltheblank1" >  <input   type="text"  /></div>
</body>
</html>

Jquery的：

$(document).ready(function () {
  $("#filltheblank1").children(this).blur(function () {
    if ($(this).val()) {
      var entered = $(this).val().toUpperCase();
    }
    $(this).hide(500, function () {
      $(this).parent(this).html(entered).click(function () {
        //now what to do here. I want that when user clicks o the div, the textbox should come back and when he clicks out again, it should go away and the text he entered should be preinted

      });
    });
  });
});

请帮助某人

Answer 1

首先，我会添加另一个div来显示文字，display:none第一次隐藏它：

<html>
 <body>
  <div style="width:18px; font-weight:bold; text-align:center;" id="filltheblank1" >       
    <input type="text"  />
  </div>
  <div id="message" style="display:none"></div>
</body>
</html>

然后在JS代码中你必须改进CSS选择器来访问输入元素htm，这就是我假设只有一个输入的方式：

$(document).ready(function(){

 $("#filltheblank1 input").on('blur', function(){ //on is how it should be done on jQuery 1.7 and up
    if($(this).val()){
      var entered = $(this).val().toUpperCase();
    }
    $("#filltheblank1").fadeOut(500, function(){
     $("#message").html(entered);
     $("#message").show(); //shows hidden div
    }
 });

 //event to show the input when user clicks the div
 $("#message").on('click', function(){
    $(this).hide();
    $("#filltheblank1").fadeIn();
 });
});

我确实将事件分开以执行您想要的操作，并将id添加到元素中以使javascript代码更容易，更快。

Jquery：隐藏文本框然后显示它

1 个答案: