löse Formularelement mit jquery, behalte aber Text

Question

Ich mache einen Hover-Style-Effekt, um auf ein Formularfelder und eine Texteingabe für einen Wikipedia-Viewer zuzugreifen und alles funktioniert gut, aber es gibt einen großen Unterschied zwischen schön und glücklich damit.

Wenn Sie über dem Brunnen schweben, um das Formularfeld zu öffnen, aber wenn die Maus das Feld verlässt und der Text verschwindet, gibt es eine Möglichkeit, den Eingabetext beizubehalten?

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

I .remove() wischt das Element vollständig weiß, aber ich hatte gehofft, .detach() würde den Text halten, aber es scheint es nur Daten hält, ich hoffe, dass die Benutzereingabe haben, die den *** Hinweis ersetzt durch anhalten .detach().

Das nächste, was ich für eine Lösung finden konnte, war this, die für den Text überprüft und ersetzt nur in seiner Abwesenheit, aber ich muss den Text behalten.

hier ein link zu meinen Code

Answer 1

warum nicht den Text im Eingabe speichern, bevor es zu entfernen und dann den Text des Eingangs auf

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

hier ist der Code in Paste bin http://jsbin.com/vozuheduti/edit?html,js,output Einstellung