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> </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> </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"> </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
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
Post a Comment