Question

我是JQuery的菜鸟，你在下面看到的大多数小提琴是我从SO上的许多来源汇总或得到帮助的： http://jsfiddle.net/7wp9rs2s/3/

得到同样的问题，我要按照这些步骤：
双击右侧的“asd”，点击那里，使其恢复为文本，
重复上述步骤
您现在应该看到文本被添加到旧文本中（这很难解释，但一旦你看到它就会知道我在说什么）

我认为我的问题与此有关：

$("#tempData").data("data", text);

这就是我暂时保存输入值的地方......但如果我错了，请随时纠正我。

奇怪的是，单击“...”而不是“asd”不会产生同样的问题......

Answer 1

我发现了一个更好的方法来做你想做的事情，使用html5和CSS的良好实践：
HTML：

<!DOCTYPE html>
<html>
<head>
  <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
</head>
<body>
 <div class="content">
   <input type="text" class="input"/>
   <span class="output">...</span><br>
   <input type="text" class="input"/>
   <span class="output">...</span><br>
 </div>
</body>
</html>

的CSS：

.content>input{
  display: none; /*apply a none displayed default status*/
}
.content>span{
  cursor: pointer;/* change the mouse to pointer in order to create the click*/
}

JavaScript的：

$(function () {//this is a auto-executing anonymous javaScript function
  var showText = function () {
    $(this).hide();//show text
    $(this.nextElementSibling).show();//hide input
  };


$('.input').on('input', function () {// in case someone press any key to an input
  this.nextElementSibling.innerHTML =  this.value;// will apply those changes to next sibling in this case will be span element
});
$('.output').on('dblclick', function () {//in clase someone double click the output
  $(this).hide(); //it hides the output
  $(this.previousElementSibling).show();//and show the previous sibling  in this case will be input tag
});
$('.input').blur(showText).keypress(function (e) {//in case the input is unfucused or keypress
    if(e.which === 13) { //in case enter key is pressed
      showText.call(this);//execute de showText function and send the current context
    }
});
});

http://jsbin.com/nekicewicu/1/edit?html,css,js,output

JQuery：由于某些我无法弄清楚的原因，文本被添加到文本框中

1 个答案: