Friday, April 10, 2015

Enter Keypress Using JQuery

In this sample code will show you how to use enter key press using  Jquery Javascript library framework our program will ask the user to enter their name and then the user press the enter key and then our program will greet our user.


 If you like my work please send me an email at  jakerpomperada@gmail.com and jakerpomperada@yahoo.com

People here in the Philippines who wish to contact me can call and text me in this number 09173084360. 

Thank you very much and God Bless.



Sample Program Output

Program Listing

<!-- Enter Keypress in JQuery              -->
<!-- April 10, 2015  Friday                     -->
<!-- Written By: Mr. Jake R. Pomperada, MAED-IT -->
<!-- JQuery Version                             -->
<html>
<title>Enter Keypress in JQuery </title>
<script src="jquery.js"></script>
<style>
h2 {
    font-family:arial;
};
</style>
<script>
 function clear_me() {
    document.getElementById("me").value="";
document.getElementById("display").value="";
display.innerHTML ="";
document.getElementById("me").focus();
}
</script>
<body bgcolor="lightgreen">
<br>
<h2 align="center"> Enter Keypress in JQuery
</h2>
<font face="arial" size='5'>
What is your name : ? &nbsp;
<input style="font-size:20px; font-family:arial; color:magenta" type="text" name="me"
  id="me" utofocus>
<br><br>
<button onclick="clear_me();" title="Click here to clear textbox.">
Clear Text Box</button> <br><br><br>
<div id="display" style="height: 50px; width: 100%;"></div>
</font>
<script>
var display=document.getElementById("display");

 $('#me').keypress(function(e) {
if (e.which == 13) {
      message = "Hello " + "<span style='color: red'>"+
 document.getElementById("me").value + "</span> "+ " How are you? Welcome To JQuery Programming " ;
      display.innerHTML= message;
 
}
});
</script>
</body>
</html>



No comments:

Post a Comment