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

Posted 2023-02-16

【中文标题】用 jquery 分离表单元素但保留文本

【英文标题】：detach form element with jquery but keep text

【发布时间】：2017-02-28 05:12:47

【问题描述】：

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

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

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

【参考方案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中的代码

【讨论】：

是的！甚至没有想过这样做，保存并重新输入值，谢谢大家！