javascript - fade out of alphabet onkeypress of letter equal to value in a div -


i want add riddle website , i've got question template. below

<table width="474" border="0" align="center" cellpadding="7" cellspacing="7">     <tr>       <td width="41"><label for="riddle">riddle</label></td>       <td colspan="6">what goes , never comes down?</td>     </tr>     <tr>       <td>&nbsp;</td>       <td width="52"><div id="div1" class="answerbox">a</div></td>       <td width="25"><div id="div2"class="answerbox">s</div></td>       <td width="50"><div id="div3"class="answerbox">d</div></td>       <td width="50"><div id="div4"class="answerbox">f</div></td>       <td width="50"><div id="div5"class="answerbox">g</div></td>       <td width="52"><div id="div6"class="answerbox">h</div></td>     </tr>     <tr>       <td>&nbsp;</td>       <td><div id="div7"class="answerbox">k</div></td>       <td><div id="div8"class="answerbox">l</div></td>       <td><div id="div9"class="answerbox">m</div></td>       <td><div id="div10"class="answerbox">n</div></td>       <td><div id="div11"class="answerbox">o</div></td>       <td><div id="div12"class="answerbox">p</div></td>     </tr>     <tr>       <td>anwer</td>       <td colspan="6"><label for="answer"></label>       <input name="answer" type="text" id="answer" size="40" /></td>     </tr>     <tr>       <td colspan="7"><div align="center">         <input type="submit" name="button" id="button" value="submit" />       </div></td>     </tr>     <tr>       <td colspan="7">&nbsp;</td>     </tr>   </table> 

what want achieve when user starts type answer in answer textbox, letter or types in div's class of "answerbox" should fade out if or presses backspace erase answer letter fade in in div

here's fiddle question

http://jsfiddle.net/q4xhwwrb/

i have modified fiddle bit (after fork) , added reference jquery 1.11

http://jsfiddle.net/71n57pot/3/

the biggest part note "keyup" event:

$("#answer").on("keyup",function(e){ ... }); 

it doesn't function keydown or keypress functions because value of "answer" input doesn't change before then

it might start down path - might want add bit of tweaking account letters pressed aren't in selected letters of choice. have added support multiple instances of same letter well.

happy coding!


Comments

Popular posts from this blog

javascript - Karma not able to start PhantomJS on Windows - Error: spawn UNKNOWN -

Nuget pack csproj using nuspec -

c# - Display ASPX Popup control in RowDeleteing Event (ASPX Gridview) -