how to apply one function to many textboxes?

Question

3.00/5 (1 vote)

See more:

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

XML

<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 18:27pm

Maruthiram_99

Add a Solution

Comments

Sergey Alexandrovich Kryukov 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 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);
});
});

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Guirec · Answer 1 · 2013-02-12T18:52:00

Solution 1

add an attribute

HTML

class="virtualKeyboard"

to all your texboxes and then change your jQuery script like this:

XML

<script type="text/javascript">
$(document).ready(function () {
$(".virtualKeyboard").keyboard({
autoAccept:true
})

    </script>

Posted 12-Feb-13 18:52pm

Guirec

Comments

Guirec 13-Feb-13 1:28am

who's downvoting this?? It is a pretty straightforward answere and which works for sure...

Maruthiram_99 13-Feb-13 1:30am

can u modify my code...plzz

Maruthiram_99 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 13-Feb-13 1:34am

do you have the html part?

vinodkumarnie 15-Feb-13 23:04pm

share your html part...?

Sergey Alexandrovich Kryukov · Answer 2 · 2013-02-12T18:59:00

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

Posted 12-Feb-13 18:59pm

Sergey Alexandrovich Kryukov

Comments

Maruthiram_99 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 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