Keyboard Issues

[vivekkws]

Dear Sir,
I have given the image where i have been problem. how i use keyboard multiple input box.

this is my keyboard code

  $(function(){
var $write = $(':input').on('click', function(){
	var id = this.id;
	shift = false,
	capslock = false;
	//var str = new Array();
	//temp = str.split(" : ");
	//console.log(temp);
	var ids = $(":input").map((i, el) => el.id).get();
		var found = ids.find(function(element) {
		  return element == 'itemNo_1';
		});
		console.log(found);
	
	//alert(citrus);
	
$('#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 = $write.html(),
			txt = html.substr(0, html.length - 1);
		  $write.html(txt);
		  $write.autocomplete("search", txt);
		  return false;
		}
		// Delete

	// 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;
	}
	//console.log("DO IT ", character);
	// Add the character
	if(found == 'itemNo_1'){
		$write.val($write.val() + character);		
		$write.html(txt);
		$write.autocomplete("search", txt);
	}
	else if(found == 'itemNo_2'){			
		alert("i am itemNo_2");
	}
	
});	
});
   });
    $(function () {
	 var write = write();
     write.init("keyboard");

     //first input focus
     var $firstInput = $(':input').first().focus();
     write.currentElement = $firstInput;
     write.currentElementCursorPosition = 0;
 });

[vivekkws]

Dear Sir,
The following link the same link where i take keyboard but in this one problem. its for single input box.
Can someone please explain how to make this work with multiple input boxes and have the tab button jump to the next input box? It would really help me out.

Creating a Keyboard With CSS and jQuery

[m_hutley]

HTML Global tabindex Attribute

The currently active element can be found as document.activeElement.
Check that it has a given class with element.classList.contains.

[m3g4p0p]

@vivekkws

Can someone please explain how to make this work with multiple input boxes

You might reassign the $write variable when focussing another textarea, so that the keyboard always edits the one that was last focussed:

$('textarea').on('focus', function () {
  $write = $(this)
})

You might want to also add a class to the currently active text area though so that the user can see which they are currently editing.

@vivekkws

have the tab button jump to the next input box

Do you want to just emulate the regular tab-key behaviour, or cycle through a given list of text areas (such as $('.write'))?

[vivekkws]

Its not working please give me some other modification

[m3g4p0p]

@vivekkws

Its not working

I was referring to the code given in the link you posted in your 2nd topic (before they got merged), and it does work; see this fiddle.

PS: Just had a look at your 1st post, do you mean you want to change all text area values simultaneously?

[Mittineague]

For cross-post discussion, please see

How to get id of every form all element on focus through jquery?

It is for first input box var $write = $(‘input[type=text]:first’).focus(function() { but i want when i focus any input box so its id store in $write function. like first input box id=“item1” so when focus on input box so storing item1 then if input box id=“item2” so when focus on second input box so storing item2 .

[vivekkws]

In this code i want particular id of input tag at input tag place on focus . what is the process

Here is my code where i want to get id on focus

var $write = $(':input').bind('focus', function() {
      shift = false,
      capslock = false;

[Dormilich]

You should first solve the issue of your script defining event handlers inside event handlers, which is IMHO the source for your problems.

[vivekkws]

@Dormilich

IMHO

Actually it is a plugin so i am not write any of code in it and sir, in my case i want get id of particular input box at same place and by which it store in $write function . how we do it?

[Dormilich]

@vivekkws

i want get id of particular input box at same place and by which it store in $write function

If you fix the mentioned problem, there will be no need for that.

[vivekkws]

How i resolve i am not good in jquery and javascript. i want your help please help me?

[vivekkws]

@vivekkws

var $write = $(‘:input’).bind(‘focus’, function() {

var $write = $(‘:input’).bind(‘focus’, function() {

I want id of input when focus in input at in input by which it store in $write

[Dormilich]

$(document).on('focus', ':input', function (evt) {
    alert(evt.target.id)
})

@vivekkws

by which it store in $write

How many times am I supposed to tell you that this is not the solution to your problem?

[vivekkws]

Dear sir,
So how i resolve this problem any solution because in my side i am totally frustrate with it.because i get id inside function. and when i assign again $write function in it.so .$write.value is not function . one thing tell me is it possible or not?

[Dormilich]

@vivekkws

So how i resolve this problem

You resolve it by removing the click handler assignment from the focus handler.

@vivekkws

i am totally frustrate with it.

The curse of the XY problem. once you have hit a dead end you must step back and try a different approach.

[vivekkws]

Dear Sir ,

I don’t have too much time for new keyboard.because i have to submit my project tomorrow in my college in this plugin any solution just give because i am taking too much time.i want only my keyboard working with input box . where is my cursor only that input box enable other should be not work…