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 : ?
<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>
|
Friday, April 10, 2015
Enter Keypress Using JQuery
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment