Showing posts with label keypress in js. Show all posts
Showing posts with label keypress in js. Show all posts

Friday, April 10, 2015

Enter Keypress in JavaScript

 In this sample code will show you how to use enter key press using Javascript 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 JavaScript                              -->
<!-- April 10, 2015  Friday                                            -->
<!-- Written By: Mr. Jake R. Pomperada, MAED-IT   -->
<!-- JavaScript                                                              -->
<html>
<style>
h2 {
    font-family:arial;
};
</style>
<script>
function get_name(e) {
       var display=document.getElementById("display");
if (e.keyCode==13){
  message = "Hello " + "<span style='color: red'>"+
  document.getElementById("me").value + "</span> "+ " How are you? " ;
       display.innerHTML= message;
  } 
       
}
 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 Javascript
</h2>
<font face="arial" size='5'>
What is your name : ? &nbsp;
<input style="font-size:20px; font-family:arial; color:blue" type="text" name="me"
  id="me" onkeypress="get_name(event)" autofocus>
<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>
</body>
</html>