JAVA BY RAMAKRISHNA: 06/07/15

Sunday 7 June 2015

Difference between keyup,keydown and keypress events

* keydown , keypress both the events are same , this events will rise/fire whenever we click the key button

* keyup event will rise whenever we click and release key button

* keyup and keydown both are case insensitive
It means a , A , other languages also that button will return always same value

* Control buttons like Home,Delete,PageUp,PageDown,Backspace,Space,Tab,CapsLock,Shift,Ctr,Alt,Arrow button will work only for keydown and keyup event , these buttons will not work with keypress event

* keypress event will return the keyboard values based on the language you selected and it depends on case sensitive.

Key Down Event

<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("#keydownId").keydown(function(e) {
functionOne(e);
});
});
</script>
<script>
function functionOne(key) {
alert(key.which);
}
</script>
</head>
<body>
<div>
KeyDown Event <input type="text" id="keydownId"/>
</div>
</body>
</html>

Key Up Event

<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("#keyupId").keyup(function(e) {
functionOne(e);
});
$("#getVal").click(function(e) {
var val = $("#keyupId").val();
alert(val);
});
});
</script>
<script>
function functionOne(key) {
alert(key.which);
}
</script>
</head>
<body>
<div>
KeyUp Event <input type="text" id="keyupId"/>
Click to Get Value <button id="getVal">Get Val</button>
</div>
</body>
</html>

Key Press Event

<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("#keypressId").keypress(function(e) {
functionOne(e);
});
});
</script>
<script>
function functionOne(key) {
alert(key.which);
}
</script>
</head>
<body>
<div>
KeyPress Event <input type="text" id="keypressId"/>
</div>
</body>
</html>

All Ajax Methods Example

* Instead of Ram.txt file use your own text file , Write any Data

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
//These states for Loading files/images only
$(document).ajaxError(function(){
//If fail is not loading , this method will work
alert("Error occured");
});
$(document).ajaxStart(function(){
//At the time of ajax starting
alert("Started");
});
$(document).ajaxStop(function(){
at the time of ajax ending
alert("Stopped");
});
$(document).ajaxSend(function(){
//After ajax request start , request will go to server
alert("Sended");
});
$(document).ajaxComplete(function(){
//If The Ajax Request is success/failure , always it will work
alert("Ajax Completed");
});
$(document).ajaxSuccess(function(){
//For success only
alert("Ajax Success");
});
$("button").click(function(){
$(".main").load("Ram.txt");
});
$("#pid1").click(function(){
$("#pid1").load("Ram.txt");
});
$(".pid2").click(function(){
$(".pid2").load("Ram.txt");
});
});
</script>
</head>
<body>
<div class="main">
<button>Get External Data</button>
<p id="pid1">Paragraph 1</p>
<p class="pid2">Paragraph 2</p>
</div>
</body>
</html>