CODEWITHSUNDEEP
javascriptforms
Java Learner
Java Learner

Reputation: 45

how can I call tab key event in javascript

Here is my simple data

John Smith            Individual            010987654

I have three textboxes and the above data will automatically insert in the first textbox of my web page.

My problem is

How can I make as soon as data is inserted in the textbox (means when textbox’s onchange event is fired)

  1. First, javascript will find ‘tab’ space in this string
  2. Second, if find ‘tab’ space in the string, javascript will press ‘tab’ key and insert data in the another text box.

Upvotes: 0

Views: 1508

Answers (4)

Dagg Nabbit
Dagg Nabbit

Reputation: 76736

Here's a plain old DOM-0 JavaScript solution, just for fun.

document.getElementById('the_form').onchange = function() {
    var field = this[0];
    var parts = field.value.split('\t');
    for (var i = 0; field = this[i]; i++) {
        field.value = parts[i] || '';
    }
}

http://jsfiddle.net/vKaxP/

Upvotes: 1

gongzhitaao
gongzhitaao

Reputation: 6682

I thought you want to split those texts into different textboxes, so I got something like:

$("#a").change(function(){
    var s = $(this).val();
    if (s.match(/\t+/)) {
        var a = s.split(/\t+/);
        $('#a').val(a[0]);
        $('#b').val(a[1]);
        $('#c').val(a[2]);
    }
});

if you type a b c into the first input box, press tab or enter, b and c would appear into other textboxes, repectively.

I use \s(space) for test in jsfiddle. You could just change it to \t for tab.

Upvotes: 1

ChrisF
ChrisF

Reputation: 180

If I correctly understand the question as "The server puts all the data into one field, tab separated, and I want to split it up into several textfields", then try this:

On load:

var fields = [$("#firstField"), $("#secondField"), $("#thirdField")];
var data = fields[0].val().split(/\t/);

for (var i = 0; i < 3; i++) {
    fields[i].val(data[i]);
}

Upvotes: 0

Tomas Kirda
Tomas Kirda

Reputation: 8413

Here is prototype of what you need to do.

HTML:

<div>
    <input id="a" />
</div>
<div>
    <input id="b" />
</div>

JavaScript:

$('#a').on('change', function () {
    var value = $(this).val();
    // Test if string has a tab:
    if (/\t/.test(value)) {
        // Just set the value of the other text box
        // And set focus:
        // Using jQuery that would be:
        $('#b').val(value).focus();
    }
});

Working demo: http://jsfiddle.net/tkirda/XmArP/

Upvotes: 0

Related Questions