Skip to main content

Traverse the cursor through text box with navigation(arrow) keys




Code
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

Traverse the cursor through text box with navigation keys
<script>
$(document).ready(function(){
$('input').keyup(function(e){
if(e.which==39)
$(this).closest('td').next().find('input').focus();
else if(e.which==37)
$(this).closest('td').prev().find('input').focus();
else if(e.which==40)
$(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
else if(e.which==38)
$(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
});
});
</script>
</head>
<body>
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>


</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>


</tr>
</table>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Learn how to setup push notifications in your Ionic app and send a sample notification using Node.js and PHP.

Ionic is an open source mobile UI toolkit for building modern, high quality cross-platform mobile apps from a single code base. To set up push notifications in your Ionic app, you will need to perform the following steps: Create a new Firebase project or use an existing one, and then enable Firebase Cloud Messaging (FCM) for your project. Install the Firebase Cloud Messaging plugin for Ionic: npm install @ionic-native/firebase-x --save Add the plugin to your app's app.module.ts file: import { FirebaseX } from '@ionic-native/firebase-x/ngx' ; @ NgModule({ ... providers: [ ... FirebaseX ... ] ... }) Initialize Firebase in your app's app.component.ts file: import { FirebaseX } from '@ionic-native/firebase-x/ngx' ; @ Component({ ... }) export class AppComponent { constructor ( private firebase : FirebaseX ) { this .firebase.init(); } } Register your app with Firebase Cloud Messaging by adding

How to export php/html page to Excel,Word & CSV file format

This class can generate the necessary request headers to make the outputted HTML be downloaded as a file by the browser with a file name that makes the file readable by Excel(.xls),Word(.doc) and CSV(.csv). Step1: Create PHP file named 'ExportPHP.class.php' ExportPHP.class.php <?php class ExportPHP { // method for Excel file function setHeaderXLS ( $file_name ) { header( "Content-type: application/ms-excel" ); header( "Content-Disposition: attachment; filename=$file_name" ); header( "Pragma: no-cache" ); header( "Expires: 0" ); } // method for Doc file function setHeaderDoc ( $file_name ) { header( "Content-type: application/x-ms-download" ); header( "Content-Disposition: attachment; filename=$file_name" ); header( 'Cache-Control: public' ); } // method for CSV file function setHeaderCSV (

How to use PHP and GD library to convert text to an image?

To convert text to an image in PHP, you can use the GD library, which is a graphics library for creating and manipulating images. Here is an example code that creates an image with a text message: <?php // Create a blank image $image = imagecreatetruecolor( 400 , 200 ); // Set the background color $bg_color = imagecolorallocate( $image , 255 , 255 , 255 ); imagefill( $image , 0 , 0 , $bg_color ); // Set the text color $text_color = imagecolorallocate( $image , 0 , 0 , 0 ); // Write the text on the image $text = "Hello World!" ; imagettftext( $image , 24 , 0 , 50 , 100 , $text_color , 'arial.ttf' , $text ); // Output the image as PNG header( 'Content-Type: image/png' ); imagepng( $image ); // Free up memory imagedestroy( $image ); ?> This code creates a 400x200 pixels image with a white background and black text that says "Hello World!". You can change the text, font, and colors to suit your ne