用 jquery 分离表单元素但保留文本

Question

我正在做一个悬停样式效果来访问一个表单域和一个维基百科查看器的文本提示，到目前为止一切都很好，但是很好和满意之间有很大的区别。

当鼠标悬停在井放大打开表单域时，当鼠标离开并且域折叠时，里面的文本消失了，有什么办法可以保留输入的文本？

var toggler = true;

var wellToggle = function(){
  $("#well").toggleClass("toggleMe")
  if (toggler === true){
    $("#magniText").append('<input class="formstyle" type="text" name="wikiFind" placeholder="***">') //if true adds input form field for user
$("#jiggyText").text("Random Article")
toggler = false;
  } else {
    $("input").detach() //removes user input here, unable to find another solution that retains user text input
    $("#jiggyText").text("")
    toggler = true
  }
};

$("#well").hover(wellToggle, wellToggle);

我知道.remove() 完全擦除了元素，但我希望.detach() 会保留文本，但它似乎只保留数据，我希望让用户输入替换 *** 提示以坚持下去.detach().

我能找到的最接近的解决方案是this，它会检查文本并仅在文本不存在时替换，但我需要保留文本。

这是我的代码的link

Answer 1

为什么不先把输入中的文字先去掉再把输入的文字设置在上

var toggler = true;
var inputText ='';
var wellToggle = function(){
  $("#well").toggleClass("toggleMe")
  if (toggler === true){
    $("#magniText").append('<input class="formstyle" type="text" name="wikiFind" placeholder="***">')
    $("#jiggyText").text("Random Article")
    $("input").val(inputText);
    toggler = false;
  } else {
    inputText = $("input").val()
    $("input").detach()
    $("#jiggyText").text("")
    toggler = true
  }
};

$("#well").hover(wellToggle, wellToggle);

这是粘贴箱http://jsbin.com/vozuheduti/edit?html,js,output中的代码