使用 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);

这里是paste bin中的代码http://jsbin.com/vozuheduti/edit?html,js,output

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

detach form element with jquery but keep text

javascript

forms

jquery

detach

jquery-hover