[jQuery] How do I prevent the newly entered text in the text input from disappearing upon focus?
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
{font-family:Consolas;
panose-1:2 11 6 9 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>I posted this yesterday, but didn’t see
my original in my email, so didn’t know if<o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>it never made it, or if it was perhaps just
not answered…but I thought I’d post it<o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>again so if anyone has any ideas…<o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'><o:p> </o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>Rick<o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'><o:p> </o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>-----------------------------------------------------------------------------------<o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'><o:p> </o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>In code prior to this, if an empty text input
is found in a form upon submission,<o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>the text “Entry required…”
is put into the text input.<o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'><o:p> </o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>Once all the text inputs have been validated,
then the function below is run to<o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>address handling the error messages and user
text input: <o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'><o:p> </o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:blue'>function</span><span style='font-size:10.0pt;
font-family:Consolas;color:black'> validation() {</span><span style='font-size:
10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
</span><span style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'> $(</span><span
style='font-size:10.0pt;font-family:Consolas;color:#006600'>':input.inputError'</span><span
style='font-size:10.0pt;font-family:Consolas;color:black'>)</span><span
style='font-size:10.0pt;font-family:Consolas;color:blue'>.</span><span
style='font-size:10.0pt;font-family:Consolas;color:black'>each(</span><span
style='font-size:10.0pt;font-family:Consolas;color:blue'>function</span><span
style='font-size:10.0pt;font-family:Consolas;color:black'>() {</span><span
style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
</span><span style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
$(</span><span style='font-size:10.0pt;font-family:Consolas;color:blue'>this</span><span
style='font-size:10.0pt;font-family:Consolas;color:black'>)</span><span
style='font-size:10.0pt;font-family:Consolas;color:blue'>.</span><span
style='font-size:10.0pt;font-family:Consolas;color:black'>focus(</span><span
style='font-size:10.0pt;font-family:Consolas;color:blue'>function</span><span
style='font-size:10.0pt;font-family:Consolas;color:black'>() {</span><span
style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
$(</span><span style='font-size:10.0pt;
font-family:Consolas;color:blue'>this</span><span style='font-size:10.0pt;
font-family:Consolas;color:black'>)</span><span style='font-size:10.0pt;
font-family:Consolas;color:blue'>.val</span><span style='font-size:10.0pt;
font-family:Consolas;color:black'>(</span><span style='font-size:10.0pt;
font-family:Consolas;color:#006600'>''</span><span style='font-size:10.0pt;
font-family:Consolas;color:black'>);</span><span style='font-size:10.0pt;
font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
</span><span style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
});</span><span style='font-size:10.0pt;
font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'> });</span><span
style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
</span><span style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'> $(</span><span
style='font-size:10.0pt;font-family:Consolas;color:#006600'>':input.inputError'</span><span
style='font-size:10.0pt;font-family:Consolas;color:black'>)</span><span
style='font-size:10.0pt;font-family:Consolas;color:blue'>.</span><span
style='font-size:10.0pt;font-family:Consolas;color:black'>each(</span><span
style='font-size:10.0pt;font-family:Consolas;color:blue'>function</span><span
style='font-size:10.0pt;font-family:Consolas;color:black'>() {</span><span
style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
</span><span style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
$(</span><span style='font-size:10.0pt;font-family:Consolas;color:blue'>this</span><span
style='font-size:10.0pt;font-family:Consolas;color:black'>)</span><span
style='font-size:10.0pt;font-family:Consolas;color:blue'>.</span><span
style='font-size:10.0pt;font-family:Consolas;color:black'>blur(</span><span
style='font-size:10.0pt;font-family:Consolas;color:blue'>function</span><span
style='font-size:10.0pt;font-family:Consolas;color:black'>() {</span><span
style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
</span><span style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
</span><span style='font-size:10.0pt;font-family:Consolas;color:blue'>if</span><span
style='font-size:10.0pt;font-family:Consolas;color:black'>
( $(</span><span style='font-size:10.0pt;font-family:Consolas;
color:blue'>this</span><span style='font-size:10.0pt;font-family:Consolas;
color:black'>)</span><span style='font-size:10.0pt;font-family:Consolas;
color:blue'>.val</span><span style='font-size:10.0pt;font-family:Consolas;
color:black'>()</span><span style='font-size:10.0pt;font-family:Consolas;
color:blue'>.</span><span style='font-size:10.0pt;font-family:Consolas;
color:black'>length </span><span style='font-size:10.0pt;font-family:Consolas;
color:blue'>></span><span style='font-size:10.0pt;font-family:Consolas;
color:black'> </span><span style='font-size:10.0pt;font-family:Consolas;
color:#FF0A0A'>0</span><span style='font-size:10.0pt;font-family:Consolas;
color:black'>
)</span><span
style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
{ $(</span><span style='font-size:10.0pt;font-family:Consolas;
color:blue'>this</span><span style='font-size:10.0pt;font-family:Consolas;
color:black'>)</span><span style='font-size:10.0pt;font-family:Consolas;
color:blue'>.</span><span style='font-size:10.0pt;font-family:Consolas;
color:black'>removeClass(</span><span style='font-size:10.0pt;font-family:Consolas;
color:#006600'>'inputError'</span><span style='font-size:10.0pt;font-family:
Consolas;color:black'>)</span><span style='font-size:10.0pt;font-family:Consolas;
color:blue'>.</span><span style='font-size:10.0pt;font-family:Consolas;
color:black'>css({</span><span style='font-size:10.0pt;font-family:Consolas;
color:#006600'>'background-color'</span><span style='font-size:10.0pt;
font-family:Consolas;color:blue'>:</span><span style='font-size:10.0pt;
font-family:Consolas;color:#006600'>'#ddd'</span><span style='font-size:10.0pt;
font-family:Consolas;color:black'> , </span><span style='font-size:10.0pt;
font-family:Consolas;color:#006600'>'color'</span><span style='font-size:10.0pt;
font-family:Consolas;color:blue'>:</span><span style='font-size:10.0pt;
font-family:Consolas;color:#006600'>'#000'</span><span style='font-size:10.0pt;
font-family:Consolas;color:black'>}); }</span><span
style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
</span><span style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
</span><span style='font-size:10.0pt;font-family:Consolas;color:blue'>if</span><span
style='font-size:10.0pt;font-family:Consolas;color:black'>
( $(</span><span style='font-size:10.0pt;font-family:Consolas;
color:blue'>this</span><span style='font-size:10.0pt;font-family:Consolas;
color:black'>)</span><span style='font-size:10.0pt;font-family:Consolas;
color:blue'>.val</span><span style='font-size:10.0pt;font-family:Consolas;
color:black'>()</span><span style='font-size:10.0pt;font-family:Consolas;
color:blue'>.</span><span style='font-size:10.0pt;font-family:Consolas;
color:black'>length </span><span style='font-size:10.0pt;font-family:Consolas;
color:blue'>==</span><span style='font-size:10.0pt;font-family:Consolas;
color:black'> </span><span style='font-size:10.0pt;font-family:Consolas;
color:#FF0A0A'>0</span><span style='font-size:10.0pt;font-family:Consolas;
color:black'> )</span><span
style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
{ $(</span><span style='font-size:10.0pt;font-family:Consolas;
color:blue'>this</span><span style='font-size:10.0pt;font-family:Consolas;
color:black'>)</span><span style='font-size:10.0pt;font-family:Consolas;
color:blue'>.val</span><span style='font-size:10.0pt;font-family:Consolas;
color:black'>(</span><span style='font-size:10.0pt;font-family:Consolas;
color:#006600'>'Entry required...'</span><span style='font-size:10.0pt;
font-family:Consolas;color:black'>); }</span><span
style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
</span><span style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'>
});</span><span style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal style='text-autospace:none'><span style='font-size:10.0pt;
font-family:Consolas;color:black'> });</span><span
style='font-size:10.0pt;font-family:Consolas'><o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'>}<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'>It all works well, except for the fact that once I do make an
entry into an invalid field,<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'>and blur out of that field, then re-focus the cursor in that same
field, my valid data entry<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'>is removed.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'>With the code above, I try to avoid that happening by removing the
class, “input error”, which<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'>is happening according to Firebug, so I’m not sure why the
“val” is being reset to ‘’ or nothing<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'>upon re-focus.<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'>Is it the order or structure of the code that’s the problem?<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'>Thoughts?<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'>Have I missed another fundamental javascript coding principle, MZ?
;o)<o:p></o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'><o:p> </o:p></span>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:Consolas;
color:black'>Rick<o:p></o:p></span>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal><i><span style='color:#BFBFBF'>-------------------------------------------------------------------------------------------------------------------<o:p></o:p></span></i>
<p class=MsoNormal><i><span style='color:#BFBFBF'>"Those who hammer their
guns into plows will plow for those who do not." - Thomas Jefferson<o:p></o:p></span></i>
<p class=MsoNormal><o:p> </o:p>
</div>
</body>
</html>