Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: jQuery
Hi,,I am not good at jquery.I got a jquery for virtual key board.On clicking textbox the virtual key board appers but I want tat to another textbox also I dont know how to modify it can any one help me....The code is below
 
<script type="text/javascript">
$(document).ready(function () {
$('#txtkeyboard').keyboard({
autoAccept:true
})
 
    </script>
 
in the above txtkeyboard is the id of my textbox
Posted 12-Feb-13 19:27pm
Comments
Sergey Alexandrovich Kryukov at 13-Feb-13 1:01am
   
Did you try to see jQuery documentation? It takes few seconds to find out the methods you need...
—SA
Maruthiram_99 at 13-Feb-13 1:27am
   
Here is my complete Jquery code plzz see and help me
<script type="text/javascript">
$(document).ready(function () {
$('#txtkeyboard').keyboard({
autoAccept:true
})
$(document).ready(function () {
$('#txtpassword').keyboard({
autoaccept:true
})
</script>
 
Jquery------>
 
$(function(){
var $login = $('#login'),
$password = $('#password')
shift = false,
capslock = false;
$('#keyboard li').click(function(){
var $this = $(this),
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
// Shift keys
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
$('.letter').toggleClass('uppercase');
$('.symbol span').toggle();
shift = (shift === true) ? false : true;
capslock = false;
return false;
}
// Caps lock
if ($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase');
capslock = true;
return false;
}
// Delete
if ($this.hasClass('delete')) {
var html = $login[0].value;
var html1 = $password.value;
$login[0].value=html.substr(0, html.length - 1);
$password[0].value=html.substr(0, html.length - 1);
//$login.html(html.substr(0, html.length - 1));
return false;
}
// Special characters
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "\t";
if ($this.hasClass('return')) character = "\n";
// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();
// Remove shift once a key is clicked.
if (shift === true) {
$('.symbol span').toggle();
if (capslock === false) $('.letter').toggleClass('uppercase');
shift = false;
}
// Add the character
document.getElementById("login").value+=character;
$login[0].focus();
document.getElementById("password").value+=character;
$password[0].focus();

// $('#login').val=($('#login').html()+character;
// $login.html($login.html() + character);
});
});
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

add an attribute
class="virtualKeyboard"
to all your texboxes and then change your jQuery script like this:
 
<script type="text/javascript">
$(document).ready(function () {
$(".virtualKeyboard").keyboard({
autoAccept:true
})
 
    </script>
  Permalink  
Comments
Guirec Le Bars at 13-Feb-13 1:28am
   
who's downvoting this?? It is a pretty straightforward answere and which works for sure...
Maruthiram_99 at 13-Feb-13 1:30am
   
can u modify my code...plzz
Maruthiram_99 at 13-Feb-13 1:28am
   
$(document).ready(function () {
$('#txtkeyboard').keyboard({
autoAccept:true
})
$(document).ready(function () {
$('#txtpassword').keyboard({
autoaccept:true
})
 

 
$(function(){
var $login = $('#login'),
$password = $('#password')
shift = false,
capslock = false;
$('#keyboard li').click(function(){
var $this = $(this),
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
// Shift keys
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
$('.letter').toggleClass('uppercase');
$('.symbol span').toggle();
shift = (shift === true) ? false : true;
capslock = false;
return false;
}
// Caps lock
if ($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase');
capslock = true;
return false;
}
// Delete
if ($this.hasClass('delete')) {
var html = $login[0].value;
var html1 = $password.value;
$login[0].value=html.substr(0, html.length - 1);
$password[0].value=html.substr(0, html.length - 1);
//$login.html(html.substr(0, html.length - 1));
return false;
}
// Special characters
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "\t";
if ($this.hasClass('return')) character = "\n";
// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();
// Remove shift once a key is clicked.
if (shift === true) {
$('.symbol span').toggle();
if (capslock === false) $('.letter').toggleClass('uppercase');
shift = false;
}
// Add the character
document.getElementById("login").value+=character;
$login[0].focus();
document.getElementById("password").value+=character;
$password[0].focus();

// $('#login').val=($('#login').html()+character;
// $login.html($login.html() + character);
});
});
Guirec Le Bars at 13-Feb-13 1:34am
   
do you have the html part?
vinodkumarnie at 15-Feb-13 23:04pm
   
share your html part...?
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

You are using the "id selector", which by definition (if HTML is correct) always give one control. But you can use other selectors which gives you a set of controls. For example, class selector will give you all element of certain CSS class, and element selector will give you all elements with certain HTML tag.
 
Please see: http://api.jquery.com/category/selectors/[^].
 
In such cases, you will select a set of elements. Now, you can apply the method .each method to obtained set, which allows you to apply the same method to all elements. Please see:
http://api.jquery.com/each/[^].
 
The code sample is available in the last article referenced above.
 
Good luck,
—SA
  Permalink  
Comments
Maruthiram_99 at 13-Feb-13 1:28am
   
This is my code for my problem....
 
$(document).ready(function () {
$('#txtkeyboard').keyboard({
autoAccept:true
})
$(document).ready(function () {
$('#txtpassword').keyboard({
autoaccept:true
})
 

 
$(function(){
var $login = $('#login'),
$password = $('#password')
shift = false,
capslock = false;
$('#keyboard li').click(function(){
var $this = $(this),
character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
// Shift keys
if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
$('.letter').toggleClass('uppercase');
$('.symbol span').toggle();
shift = (shift === true) ? false : true;
capslock = false;
return false;
}
// Caps lock
if ($this.hasClass('capslock')) {
$('.letter').toggleClass('uppercase');
capslock = true;
return false;
}
// Delete
if ($this.hasClass('delete')) {
var html = $login[0].value;
var html1 = $password.value;
$login[0].value=html.substr(0, html.length - 1);
$password[0].value=html.substr(0, html.length - 1);
//$login.html(html.substr(0, html.length - 1));
return false;
}
// Special characters
if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
if ($this.hasClass('space')) character = ' ';
if ($this.hasClass('tab')) character = "\t";
if ($this.hasClass('return')) character = "\n";
// Uppercase letter
if ($this.hasClass('uppercase')) character = character.toUpperCase();
// Remove shift once a key is clicked.
if (shift === true) {
$('.symbol span').toggle();
if (capslock === false) $('.letter').toggleClass('uppercase');
shift = false;
}
// Add the character
document.getElementById("login").value+=character;
$login[0].focus();
document.getElementById("password").value+=character;
$password[0].focus();

// $('#login').val=($('#login').html()+character;
// $login.html($login.html() + character);
});
});
Sergey Alexandrovich Kryukov at 13-Feb-13 1:31am
   
Why are you showing it? What's unclear in my solution?
Anyway, if you want to show your code, do in in the body of the question where you can format it with "pre" tags, write a comment...
—SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 200
1 PIEBALDconsult 150
2 BillWoodruff 148
3 Jochen Arndt 135
4 DamithSL 130
0 OriginalGriff 5,695
1 DamithSL 4,506
2 Maciej Los 4,007
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,190


Advertise | Privacy | Mobile
Web02 | 2.8.141216.1 | Last Updated 13 Feb 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100