jqueryでフォーム要素を切り離してもテキストを保持する

Question

フォームフィールドとテキストプロンプトにアクセスするためのホバースタイルのエフェクトをWikipediaビューアに使用していますが、これまでのところうまく動作しますが、細かい点では幸せです。

フォームフィールドを開くために井戸の上にマウスを置いたとき、マウスが去ってフィールドが崩壊すると、内部のテキストが消えてしまうので、入力テキストを保持する方法はありますか？私は.remove()知っ

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

が完全に要素を払拭するが、私はテキストを続けるだろう.detach()を期待していたが、それはデータのみを保持します思える、私はを通じて持続する***ヒントを置き換えるユーザー入力を持つように願っています.detach()。

解決策のために私が見つけた最も近いものはthisで、テキストがないかどうかをチェックしていますが、テキストを保持する必要があります。それを削除してから、ここで

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

上の入力のテキストを設定する前に、入力中のテキストを保存していない理由はここに

は私のコードにlink

Answer 1

だペーストビンhttp://jsbin.com/vozuheduti/edit?html,js,outputのコードである